vueless 0.0.482 → 0.0.484

package/adatper.locale/vueless.ts

@@ -24,7 +24,7 @@ export interface LocaleInstance {
   fallback: Ref<string>;
   t: (key: string, ...params: unknown[]) => string;
   n: (value: number) => string;
-  tm: (key: string, ...params: unknown[]) => string;
+  tm: <TMassages>(key: string) => Partial<TMassages>;
 }
 
 const FALLBACK_LOCALE_CODE = "en";
@@ -86,7 +86,7 @@ function createTranslateMessageFunction(
   fallback: Ref<string>,
   messages: Ref<LocaleMessages>,
 ) {
-  return (key: string) => {
+  return <TMassages>(key: string): Partial<TMassages> => {
     const currentLocale = current.value && messages.value[current.value];
     const fallbackLocale = fallback.value && messages.value[fallback.value];
 
@@ -100,7 +100,7 @@ function createTranslateMessageFunction(
       str = getObjectValueByPath(fallbackLocale, key, null);
     }
 
-    return String(str);
+    return str as TMassages;
   };
 }
 

package/composables/useUI.ts

@@ -32,6 +32,7 @@ import type {
   CVA,
   KeyAttrs,
   KeysToExtend,
+  ExtendedKeyClasses,
 } from "../types.ts";
 
 interface MergedConfigOptions {
@@ -113,7 +114,7 @@ export default function useUI<T>(
    * – value: reactive string of extendingKey classes.
    */
   function getExtendingKeysClasses(extendingKeys: string[], mutatedProps = {}) {
-    const extendingClasses: UnknownObject = {};
+    const extendingClasses: ExtendedKeyClasses = {};
 
     for (const key of extendingKeys) {
       extendingClasses[key] = getClasses(key, mutatedProps);

package/package.json

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

package/types.ts

@@ -4,13 +4,18 @@ import { hasSlotContent } from "./composables/useUI.ts";
 import UTextDefaultConfig from "./ui.text-block/config.ts";
 import UButtonDefaultConfig from "./ui.button/config.ts";
 import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
+import UCalendarDefaultConfig from "./ui.form-calendar/config.ts";
 
-import type { ComputedRef, MaybeRef } from "vue";
+import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
 import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
 export type TemplateRefElement = MaybeRef<HTMLElement | HTMLElement[] | null>;
 
+export interface ExtendedKeyClasses {
+  [key: string]: Ref<string>;
+}
+
 export interface ThemeConfig {
   /**
    * Components brand (primary) color.
@@ -109,6 +114,7 @@ export interface Components {
   UText?: Partial<typeof UTextDefaultConfig>;
   UButton?: Partial<typeof UButtonDefaultConfig>;
   UBadge?: Partial<typeof UBadgeDefaultConfig>;
+  UCalendar?: Partial<typeof UCalendarDefaultConfig>;
 }
 
 export interface Directives {
@@ -162,9 +168,10 @@ export interface VueAttrs {
   value?: string;
 }
 
-export interface UseAttrs {
+export interface UseAttrs<TConfig> {
   hasSlotContent: typeof hasSlotContent;
-  [key: string]: object | undefined;
+  config: Ref<TConfig | undefined>;
+  [key: string]: Ref<TConfig | undefined> | typeof hasSlotContent;
 }
 
 export interface KeyAttrs extends VueAttrs {

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>
   `,
-};
+});