vueless 0.0.482 → 0.0.483

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.482",
+  "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/web-types.json

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