vueless 0.0.481 → 0.0.483

package/constants.js

@@ -189,6 +189,8 @@ export const DEFAULT_SVGO_CONFIG = {
 export const PX_IN_REM = 16;
 export const NESTED_COMPONENT_REG_EXP = /\{U[^}]*}/g;
 export const DYNAMIC_COLOR_PATTERN = "{color}";
-export const TAILWIND_CLASS_DELIMITER = ":";
+export const TAILWIND_COLOR_OPACITY_DELIMITER = "/";
+export const TAILWIND_VARIANT_DELIMITER = ":";
+export const TAILWIND_VARIANT_DELIMITER_REG_EXP = /:(?![^[]*])/;
 export const CACHE_PATH = "node_modules/.cache/vueless";
 export const VUELESS_CONFIG_FILE_NAME = "vueless.config";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.481",
+  "version": "0.0.483",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.button/storybook/stories.js

@@ -5,6 +5,8 @@ import {
   getDocsDescription,
 } from "../../utils/storybook.ts";
 
+import { ref } from "vue";
+
 import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
@@ -46,7 +48,7 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
   },
   template: `
     <UCol>
-      <URow>
+      <URow no-mobile>
         <UButton
           v-for="(option, index) in options"
           :key="index"
@@ -62,22 +64,28 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
 const ColorTemplate = (args, { argTypes }) => ({
   components: { UButton, URow, UCol },
   setup() {
+    const variants = [...argTypes.variant.options, "thirdary"];
+
     return {
       args,
-      variants: argTypes.variant.options,
+      variants,
       colors: argTypes.color.options,
+      shouldBeFilled: (variant, index) => {
+        return variant === "thirdary" && index === variants.length - 2;
+      },
     };
   },
   template: `
     <UCol>
-      <URow v-for="(variant, index) in variants" :key="index">
+      <URow v-for="(variant, variantIndex) in variants" :key="variantIndex" no-mobile>
         <UButton
-          v-for="(color, index) in colors"
+          v-for="(color, colorIndex) in colors"
           v-bind="args"
           :variant="variant"
           :color="color"
           :label="color"
-          :key="index"
+          :key="colorIndex"
+          :filled="shouldBeFilled(variant, variantIndex)"
         />
       </URow>
     </UCol>
@@ -96,6 +104,37 @@ Sizes.args = { enum: "size" };
 export const Round = EnumVariantTemplate.bind({});
 Round.args = { enum: "variant", round: true };
 
+export const Loading = (args) => ({
+  components: { UButton, URow },
+  setup() {
+    const loading = ref(false);
+
+    function toggleLoading() {
+      loading.value = !loading.value;
+    }
+
+    return { args, toggleLoading, loading };
+  },
+  template: `
+    <URow no-mobile>
+      <UButton
+        label="Loader demo"
+        :loading="loading"
+        />
+      <UButton
+        label="Toggle loading"
+        variant="secondary"
+        color="green"
+        leftIcon="play_arrow"
+        @click="toggleLoading"
+        />
+    </URow>
+  `,
+});
+
+export const Block = DefaultTemplate.bind({});
+Block.args = { block: true };
+
 export const Disabled = EnumVariantTemplate.bind({});
 Disabled.args = { enum: "variant", disabled: true };
 
@@ -105,43 +144,64 @@ NoRing.args = { noRing: true };
 export const Colors = ColorTemplate.bind({});
 Colors.args = {};
 
-export const LeftIcon = DefaultTemplate.bind({});
-LeftIcon.args = { leftIcon: "star" };
-
-export const RightIcon = DefaultTemplate.bind({});
-RightIcon.args = { rightIcon: "star" };
+export const Square = DefaultTemplate.bind({});
+Square.args = { square: true, icon: "filter_list" };
 
-export const SlotDefault = DefaultTemplate.bind({});
-SlotDefault.args = {
-  slotTemplate: `
-    <template #default>
-      🤘🤘🤘
-    </template>
-  `,
-};
-
-export const LeftSlot = DefaultTemplate.bind({});
-LeftSlot.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon
-        name="archive"
-        color="red"
-        size="sm"
+export const IconProps = (args) => ({
+  components: { UButton, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UButton
+        leftIcon="download"
+        label="Download"
       />
-    </template>
+      <UButton
+        rightIcon="menu"
+        label="Menu"
+      />
+    </URow>
   `,
-};
+});
 
-export const RightSlot = DefaultTemplate.bind({});
-RightSlot.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon
-        name="archive"
-        color="red"
-        size="sm"
-      />
-    </template>
+export const Slots = (args) => ({
+  components: { UButton, UIcon, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UButton v-bind="args" label="Add to favorite">
+        <template #left>
+          <UIcon
+            name="heart_plus"
+            color="green"
+            size="sm"
+          />
+        </template>
+      </UButton>
+
+      <UButton v-bind="args" square>
+        <template #default>
+          <UIcon
+            name="settings"
+            color="green"
+            size="sm"
+          />
+        </template>
+      </UButton>
+
+      <UButton v-bind="args" label="Delete">
+        <template #right>
+          <UIcon
+            name="delete"
+            color="green"
+            size="sm"
+          />
+        </template>
+      </UButton>
+    </URow>
   `,
-};
+});

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

@@ -50,7 +50,7 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
     return { args, options: argTypes[args.enum].options, prefixedOptions };
   },
   template: `
-    <URow>
+    <URow no-mobile>
       <ULink
         v-for="(option, index) in options"
         :key="index"
@@ -71,26 +71,93 @@ Sizes.args = { enum: "size" };
 export const Colors = EnumVariantTemplate.bind({});
 Colors.args = { enum: "color" };
 
-export const Types = EnumVariantTemplate.bind({});
-Types.args = { enum: "type" };
-
-export const Underlined = EnumVariantTemplate.bind({});
-Underlined.args = { enum: "color", underlined: true, dashed: false };
+export const Types = (args) => ({
+  components: { ULink, URow },
+  setup() {
+    function getTypeLabel(type) {
+      switch (type) {
+        case "phone":
+          return "+1 (000) 123-4567";
+        case "email":
+          return "hello@vueless.com";
+        case "link":
+          return "Vueless.com";
+      }
+    }
 
-export const Dashed = EnumVariantTemplate.bind({});
-Dashed.args = { enum: "color", dashed: true };
+    function getTypeHref(type, label) {
+      switch (type) {
+        case "phone": {
+          const phoneNumber = label.replace(/\D/g, "");
+
+          return `+${phoneNumber}`;
+        }
+
+        case "email":
+          return `${label}`;
+        case "link":
+          return "https://vueless.com/";
+        default:
+          return "#";
+      }
+    }
 
-export const Href = DefaultTemplate.bind({});
-Href.args = { href: "https://storybook.js.org/docs/react/get-started/introduction" };
+    const options = ["phone", "email", "link"];
+    const links = options.map((type) => ({
+      type,
+      label: getTypeLabel(type),
+      href: getTypeHref(type, getTypeLabel(type)),
+    }));
 
-export const Route = DefaultTemplate.bind({});
-Route.args = { name: "routerName" };
+    return { args, links };
+  },
+  template: `
+    <URow>
+      <ULink
+        v-for="(link, index) in links"
+        :key="index"
+        v-bind="args"
+        :type="link.type"
+        :label="link.label"
+        :href="link.href"
+        target-blank
+      />
+    </URow>
+  `,
+});
 
-export const TargetBlank = DefaultTemplate.bind({});
-TargetBlank.args = {
-  href: "https://storybook.js.org/docs/react/get-started/introduction",
-  targetBlank: true,
-};
+export const UnderlineVariants = (args, { argTypes } = {}) => ({
+  components: { ULink, URow },
+  setup() {
+    const variants = [
+      { name: "Default", props: {} },
+      { name: "Underlined", props: { underlined: true } },
+      { name: "Dashed", props: { dashed: true } },
+    ];
+
+    const colors = argTypes.color.options;
+
+    return {
+      args,
+      variants,
+      colors,
+    };
+  },
+  template: `
+    <div v-for="variant in variants" :key="variant.name" class="mb-8">
+      <div class="text-sm font-medium mb-2">{{ variant.name }}</div>
+      <URow no-mobile>
+        <ULink
+          v-for="color in colors"
+          :key="color"
+          v-bind="variant.props"
+          :color="color"
+          :label="color"
+        />
+      </URow>
+    </div>
+  `,
+});
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
@@ -98,8 +165,11 @@ Disabled.args = { disabled: true };
 export const NoRing = DefaultTemplate.bind({});
 NoRing.args = { noRing: true };
 
-export const SlotDefault = DefaultTemplate.bind({});
-SlotDefault.args = {
+export const Block = DefaultTemplate.bind({});
+Block.args = { block: true, config: { wrapper: "border-2 border-dashed border-green-500 p-2" } };
+
+export const DefaultSlot = DefaultTemplate.bind({});
+DefaultSlot.args = {
   slotTemplate: `
     <template #default>
       <UButton label="Text" />
@@ -107,20 +177,24 @@ SlotDefault.args = {
   `,
 };
 
-export const SlotLeft = DefaultTemplate.bind({});
-SlotLeft.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon name="star" size="xs" />
-    </template>
-  `,
-};
-
-export const SlotRight = DefaultTemplate.bind({});
-SlotRight.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon name="star" size="xs" />
-    </template>
+export const LeftAndRightSlots = (args) => ({
+  components: { ULink, UIcon, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <ULink label="Download">
+        <template #left>
+          <UIcon name="download" size="xs" color="green" />
+        </template>
+      </ULink>
+
+      <ULink label="Open">
+        <template #right>
+          <UIcon name="open_in_new" size="xs" color="green" />
+        </template>
+      </ULink>
+    </URow>
   `,
-};
+});

package/utils/node/tailwindSafelist.js

@@ -15,9 +15,11 @@ import {
   BRAND_COLOR,
   GRAY_COLOR,
   DYNAMIC_COLOR_PATTERN,
-  TAILWIND_CLASS_DELIMITER,
+  TAILWIND_VARIANT_DELIMITER,
   TAILWIND_MERGE_EXTENSION,
   NESTED_COMPONENT_REG_EXP,
+  TAILWIND_COLOR_OPACITY_DELIMITER,
+  TAILWIND_VARIANT_DELIMITER_REG_EXP,
 } from "../../constants.js";
 
 const twMerge = extendTailwindMerge(merge(TAILWIND_MERGE_EXTENSION, vuelessConfig.tailwindMerge));
@@ -140,16 +142,22 @@ function getSafelistClasses(config) {
 }
 
 function getSafelistItem(safelistClass, colorString) {
-  const classes = safelistClass.split(TAILWIND_CLASS_DELIMITER);
+  const classes = safelistClass.split(TAILWIND_VARIANT_DELIMITER_REG_EXP);
   const mainClass = classes.at(-1);
-  const variantClasses = classes.slice(0, classes.length - 1);
-
   const pattern = mainClass.replace(DYNAMIC_COLOR_PATTERN, colorString);
-  const variants = variantClasses
-    .map((variantItem) => (variantItem ? variantItem : TAILWIND_CLASS_DELIMITER))
-    .join("");
 
-  return classes.length === 1 ? { pattern } : { pattern, variants: [variants].flat() };
+  if (classes.length > 1) {
+    const variantClasses = classes.slice(0, classes.length - 1);
+
+    const variants =
+      variantClasses.length > 1
+        ? [variantClasses.join(TAILWIND_VARIANT_DELIMITER)].flat()
+        : [variantClasses.join()].flat();
+
+    return { pattern, variants };
+  } else {
+    return { pattern };
+  }
 }
 
 async function getComponentSafelist(componentName, { colors, vuelessConfigFiles }) {
@@ -288,11 +296,13 @@ function getSafelistData(safelist) {
       .match(safelistItemRegExp)
       .slice(matchGroupStart, matchGroupEnd);
 
+    const [shade] = colorShade.split(TAILWIND_COLOR_OPACITY_DELIMITER);
+
     return {
       property,
       colorPattern,
       variants: safelistItem.variants,
-      shades: new Set([colorShade]),
+      shades: new Set([shade]),
     };
   });
 }
@@ -317,7 +327,7 @@ function mergeSafelistColors(safelistData) {
       return !isSameItem && isSameProperty && isSameVariants && isIncludesColors;
     });
 
-    if (duplicateIndex === -1) {
+    if (!~duplicateIndex) {
       mergedSafelist.push(currentSafelistItem);
     } else {
       const mergedColors = [

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.481",
+  "version": "0.0.483",
   "contributions": {
     "html": {
       "description-markup": "markdown",