vueless 0.0.504 → 0.0.506

package/package.json

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

package/types.ts

@@ -11,6 +11,9 @@ import UHeaderDefaultConfig from "./ui.text-header/config.ts";
 import UNotifyDefaultConfig from "./ui.text-notify/config.ts";
 import UDotDefaultConfig from "./ui.other-dot/config.ts";
 import UButtonDefaultConfig from "./ui.button/config.ts";
+import ULinkDefaultConfig from "./ui.button-link/config.ts";
+import UToggleDefaultConfig from "./ui.button-toggle/config.ts";
+import UToggleItemDefaultConfig from "./ui.button-toggle-item/config.ts";
 import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
 import UCalendarDefaultConfig from "./ui.form-calendar/config.ts";
 import UDatePickerConfig from "./ui.form-date-picker/config.ts";
@@ -132,6 +135,9 @@ export interface Components {
   UNotify?: Partial<typeof UNotifyDefaultConfig>;
   UDot?: Partial<typeof UDotDefaultConfig>;
   UButton?: Partial<typeof UButtonDefaultConfig>;
+  ULink?: Partial<typeof ULinkDefaultConfig>;
+  UToggle?: Partial<typeof UToggleDefaultConfig>;
+  UToggleItem?: Partial<typeof UToggleItemDefaultConfig>;
   UBadge?: Partial<typeof UBadgeDefaultConfig>;
   UCalendar?: Partial<typeof UCalendarDefaultConfig>;
   UDatePicker?: Partial<typeof UDatePickerConfig>;

package/ui.button/UButton.vue

@@ -1,3 +1,109 @@
+<script lang="ts" setup>
+import { computed, ref, watchEffect, useId, watch } from "vue";
+
+import { useDarkMode } from "../composables/useDarkMode.ts";
+import { getDefault } from "../utils/ui.ts";
+import ULoader from "../ui.loader/ULoader.vue";
+import UIcon from "../ui.image-icon/UIcon.vue";
+
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+import { UButton } from "./constants.ts";
+
+import type { UButtonProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UButtonProps>(), {
+  variant: getDefault<UButtonProps>(defaultConfig, UButton).variant,
+  color: getDefault<UButtonProps>(defaultConfig, UButton).color,
+  size: getDefault<UButtonProps>(defaultConfig, UButton).size,
+  tag: getDefault<UButtonProps>(defaultConfig, UButton).tag,
+  tabindex: getDefault<UButtonProps>(defaultConfig, UButton).tabindex,
+  filled: getDefault<UButtonProps>(defaultConfig, UButton).filled,
+  disabled: getDefault<UButtonProps>(defaultConfig, UButton).disabled,
+  block: getDefault<UButtonProps>(defaultConfig, UButton).block,
+  round: getDefault<UButtonProps>(defaultConfig, UButton).round,
+  square: getDefault<UButtonProps>(defaultConfig, UButton).square,
+  loading: getDefault<UButtonProps>(defaultConfig, UButton).loading,
+  noRing: getDefault<UButtonProps>(defaultConfig, UButton).noRing,
+  dataTest: "",
+});
+
+const elementId = props.id || useId();
+
+const { isDarkMode } = useDarkMode();
+
+const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
+  useAttrs(props);
+
+const buttonRef = ref(null);
+const buttonStyle = ref({});
+const buttonWidth = ref(0);
+
+const loaderSize = computed(() => {
+  const sizes = {
+    "2xs": "sm",
+    xs: "sm",
+    sm: "md",
+    md: "md",
+    lg: "lg",
+    xl: "lg",
+  };
+
+  return sizes[props.size];
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    "2xs": "2xs",
+    xs: "xs",
+    sm: "sm",
+    md: "sm",
+    lg: "md",
+    xl: "md",
+  };
+
+  return sizes[props.size];
+});
+
+const iconColor = computed(() => {
+  const primaryColor = isDarkMode.value ? "black" : "white";
+
+  return props.variant === "primary" ? primaryColor : props.color;
+});
+
+watch(
+  () => props.loading,
+  (newValue, oldValue) => {
+    const isLoaderOn = newValue && oldValue !== undefined;
+
+    if (isLoaderOn && buttonRef.value) {
+      buttonWidth.value = buttonRef.value.offsetWidth;
+    }
+
+    buttonStyle.value = {
+      width: isLoaderOn ? `${buttonWidth.value}px` : null,
+      paddingLeft: isLoaderOn ? "0px" : null,
+      paddingRight: isLoaderOn ? "0px" : null,
+    };
+  },
+  { immediate: true },
+);
+
+watchEffect(() => {
+  props.loading && buttonRef.value.blur();
+});
+
+defineExpose({
+  /**
+   * A reference to the button element for direct DOM manipulation.
+   * @property {HTMLElement}
+   */
+  buttonRef,
+});
+</script>
+
 <template>
   <component
     :is="tag"
@@ -79,243 +185,3 @@
     </template>
   </component>
 </template>
-
-<script setup>
-import { computed, ref, watchEffect, useId, watch } from "vue";
-
-import { getDefault } from "../utils/ui.ts";
-import ULoader from "../ui.loader/ULoader.vue";
-import UIcon from "../ui.image-icon/UIcon.vue";
-
-import defaultConfig from "./config.js";
-import useAttrs from "./useAttrs.js";
-import { UButton } from "./constants.js";
-
-defineOptions({ inheritAttrs: false });
-
-const props = defineProps({
-  /**
-   * Button variant.
-   * @values primary, secondary, thirdary
-   */
-  variant: {
-    type: String,
-    default: getDefault(defaultConfig, UButton).variant,
-  },
-
-  /**
-   * 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: getDefault(defaultConfig, UButton).color,
-  },
-
-  /**
-   * Button size.
-   * @values 2xs, xs, sm, md, lg, xl
-   */
-  size: {
-    type: String,
-    default: getDefault(defaultConfig, UButton).size,
-  },
-
-  /**
-   * Button label.
-   */
-  label: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Allows changing button html tag.
-   */
-  tag: {
-    type: String,
-    default: getDefault(defaultConfig, UButton).tag,
-  },
-
-  /**
-   * Icon name (appears instead of label).
-   */
-  icon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Left icon name.
-   */
-  leftIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Right icon name.
-   */
-  rightIcon: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Controls the keyboard “Tab” focus order of elements.
-   */
-  tabindex: {
-    type: [String, Number],
-    default: getDefault(defaultConfig, UButton).tabindex,
-  },
-
-  /**
-   * Fill the background for thirdary variant.
-   */
-  filled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).filled,
-  },
-
-  /**
-   * Disable the button.
-   */
-  disabled: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).disabled,
-  },
-
-  /**
-   * Make the Button fill the width with its container.
-   */
-  block: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).block,
-  },
-
-  /**
-   * Set button corners rounded.
-   */
-  round: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).round,
-  },
-
-  /**
-   * Set the same paddings for the button.
-   */
-  square: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).square,
-  },
-
-  /**
-   * Enable loader.
-   */
-  loading: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).loading,
-  },
-
-  /**
-   * Remove button ring on focus.
-   */
-  noRing: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UButton).noRing,
-  },
-
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Component config object.
-   */
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest: {
-    type: String,
-    default: "",
-  },
-});
-
-const elementId = props.id || useId();
-
-const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs } =
-  useAttrs(props);
-
-const buttonRef = ref(null);
-const buttonStyle = ref(null);
-const buttonWidth = ref(0);
-
-const loaderSize = computed(() => {
-  const sizes = {
-    "2xs": "sm",
-    xs: "sm",
-    sm: "md",
-    md: "md",
-    lg: "lg",
-    xl: "lg",
-  };
-
-  return sizes[props.size];
-});
-
-const iconSize = computed(() => {
-  const sizes = {
-    "2xs": "2xs",
-    xs: "xs",
-    sm: "sm",
-    md: "sm",
-    lg: "md",
-    xl: "md",
-  };
-
-  return sizes[props.size];
-});
-
-const iconColor = computed(() => {
-  return props.variant === "primary" ? "white" : props.color;
-});
-
-watch(
-  () => props.loading,
-  (newValue, oldValue) => {
-    const isLoaderOn = newValue && oldValue !== undefined;
-
-    if (isLoaderOn && buttonRef.value) {
-      buttonWidth.value = buttonRef.value.offsetWidth;
-    }
-
-    buttonStyle.value = {
-      width: isLoaderOn ? `${buttonWidth.value}px` : null,
-      paddingLeft: isLoaderOn ? "0px" : null,
-      paddingRight: isLoaderOn ? "0px" : null,
-    };
-  },
-  { immediate: true },
-);
-
-watchEffect(() => {
-  props.loading && buttonRef.value.blur();
-});
-
-defineExpose({
-  /**
-   * A reference to the button element for direct DOM manipulation.
-   * @property {HTMLElement}
-   */
-  buttonRef,
-});
-</script>

package/ui.button/config.ts

@@ -0,0 +1,167 @@
+export default /*tw*/ {
+  button: {
+    base: `
+      flex items-center justify-center font-medium whitespace-nowrap
+      border border-transparent outline-none transition
+      disabled:cursor-not-allowed cursor-pointer
+      disabled:ring-0 disabled:ring-offset-0
+      focus:ring-dynamic             focus-within:ring-dynamic
+      focus:ring-offset-dynamic      focus-within:ring-offset-dynamic
+      focus:ring-{color}-700/15      focus-within:ring-{color}-700/15
+      dark:focus:ring-{color}-500/15 dark:focus-within:ring-{color}-500/15
+    `,
+    variants: {
+      size: {
+        "2xs": "px-2 py-1 text-xs gap-0.5",
+        xs: "px-3 py-1.5 text-xs gap-1",
+        sm: "px-4 py-2 text-sm gap-1.5",
+        md: "px-5 py-3 text-sm gap-1.5",
+        lg: "px-6 py-3.5 text-base gap-1.5",
+        xl: "px-7 py-4 text-base gap-2",
+      },
+      variant: {
+        primary: `
+          text-white            dark:text-gray-900
+          bg-{color}-600        dark:bg-{color}-400
+          hover:bg-{color}-700  dark:hover:bg-{color}-500
+          focus:bg-{color}-700  dark:focus:bg-{color}-500
+          active:bg-{color}-800 dark:active:bg-{color}-600
+          disabled:bg-gray-400  dark:disabled:bg-gray-600
+        `,
+        secondary: `
+          text-{color}-600        border-{color}-600        dark:text-{color}-400        dark:border-{color}-400
+          hover:text-{color}-700  hover:border-{color}-700  dark:hover:text-{color}-500  dark:hover:border-{color}-500
+          focus:text-{color}-700  focus:border-{color}-700  dark:focus:text-{color}-500  dark:focus:border-{color}-500
+          active:text-{color}-800 active:border-{color}-800 dark:active:text-{color}-600 dark:active:border-{color}-600
+          disabled:text-gray-400  disabled:border-gray-400  dark:disabled:text-gray-600  dark:disabled:border-gray-600
+        `,
+        thirdary: `
+          text-{color}-600                                 dark:text-{color}-400
+          hover:text-{color}-700  hover:bg-{color}-700/10  dark:hover:text-{color}-500  dark:hover:bg-{color}-500/10
+          focus:text-{color}-700  focus:bg-{color}-700/10  dark:focus:text-{color}-500  dark:focus:bg-{color}-500/10
+          active:text-{color}-800 active:bg-{color}-800/15 dark:active:text-{color}-600 dark:active:bg-{color}-600/15
+          disabled:text-gray-400  disabled:bg-transparent  dark:disabled:text-gray-600  dark:disabled:bg-transparent
+        `,
+      },
+      round: {
+        false: "rounded-dynamic",
+        true: "rounded-full",
+      },
+      noRing: {
+        true: "!ring-0 !ring-offset-0",
+      },
+      loading: {
+        true: "pointer-events-none gap-0",
+      },
+      block: {
+        true: "w-full",
+      },
+    },
+    compoundVariants: [
+      {
+        color: ["grayscale", "white"],
+        class: `
+          focus:ring-gray-700/15        dark:focus:ring-gray-500/15
+          focus-within:ring-gray-700/15 dark:focus-within:ring-gray-500/15
+        `,
+      },
+      {
+        color: "grayscale",
+        variant: "primary",
+        class: `
+          bg-gray-900        dark:bg-gray-100
+          hover:bg-gray-800  dark:hover:bg-gray-200
+          focus:bg-gray-800  dark:focus:bg-gray-200
+          active:bg-gray-700 dark:active:bg-gray-300
+        `,
+      },
+      {
+        color: "grayscale",
+        variant: "secondary",
+        class: `
+          text-gray-900        border-gray-900        dark:text-gray-100         dark:border-gray-100
+          hover:text-gray-800  hover:border-gray-800  dark:hover:text-gray-200   dark:hover:border-gray-200
+          focus:text-gray-800  focus:border-gray-800  dark:focus:text-gray-200   dark:focus:border-gray-200
+          active:text-gray-700 active:border-gray-700 dark:active:focus-gray-300 dark:active:border-gray-300
+        `,
+      },
+      {
+        color: "grayscale",
+        variant: "thirdary",
+        class: `
+          text-gray-900                              dark:text-gray-100
+          hover:text-gray-800  hover:bg-gray-800/15  dark:hover:text-gray-200  dark:hover:bg-gray-200/15
+          focus:text-gray-800  focus:bg-gray-800/15  dark:focus:text-gray-200  dark:focus:bg-gray-200/15
+          active:text-gray-700 active:bg-gray-700/20 dark:active:text-gray-300 dark:active:bg-gray-300/20
+        `,
+      },
+      {
+        color: "white",
+        class: `
+          text-gray-900        dark:text-white
+          hover:text-gray-800  dark:hover:text-gray-100
+          focus:text-gray-800  dark:focus:text-gray-100
+          active:text-gray-700 dark:active:text-gray-200
+        `,
+      },
+      {
+        color: "white",
+        variant: "primary",
+        class: `
+          bg-white           dark:text-gray-900
+          hover:bg-gray-50   dark:hover:text-gray-800
+          focus:bg-gray-50   dark:focus:text-gray-800
+          active:bg-gray-100 dark:active:text-gray-700
+        `,
+      },
+      {
+        color: "white",
+        variant: "secondary",
+        class: "border-gray-100 hover:border-gray-200 focus:border-gray-200 active:border-gray-300",
+      },
+      {
+        color: "white",
+        variant: "thirdary",
+        class: "hover:bg-white/10 focus:bg-white/10 active:bg-white/15",
+      },
+      { filled: true, variant: "thirdary", class: "bg-{color}-600/10 dark:bg-{color}-400/10" },
+      { filled: true, variant: "thirdary", color: ["grayscale", "white"], class: "bg-gray-900/5 dark:bg-gray-200/5" },
+      { rightIcon: true, size: "2xs", class: "pr-1" },
+      { rightIcon: true, size: "xs", class: "pr-2" },
+      { rightIcon: true, size: "sm", class: "pr-3" },
+      { rightIcon: true, size: "md", class: "pr-4" },
+      { rightIcon: true, size: "lg", class: "pr-5" },
+      { rightIcon: true, size: "xl", class: "pr-6" },
+      { leftIcon: true, size: "2xs", class: "pl-1" },
+      { leftIcon: true, size: "xs", class: "pl-2" },
+      { leftIcon: true, size: "sm", class: "pl-3" },
+      { leftIcon: true, size: "md", class: "pl-4" },
+      { leftIcon: true, size: "lg", class: "pl-5" },
+      { leftIcon: true, size: "xl", class: "pl-6" },
+      { square: true, size: "2xs", class: "p-1" },
+      { square: true, size: "xs", class: "p-1.5" },
+      { square: true, size: "sm", class: "p-2" },
+      { square: true, size: "md", class: "p-3" },
+      { square: true, size: "lg", class: "p-3.5" },
+      { square: true, size: "xl", class: "p-4" },
+    ],
+  },
+  loader: "{ULoader}",
+  leftIcon: "{UIcon}",
+  rightIcon: "{UIcon}",
+  centerIcon: "{UIcon}",
+  defaults: {
+    color: "brand",
+    variant: "primary",
+    tag: "button",
+    size: "md",
+    tabindex: 0,
+    round: false,
+    block: false,
+    square: false,
+    filled: false,
+    noRing: false,
+    loading: false,
+    disabled: false,
+  },
+};

package/ui.button/storybook/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
-import * as stories from "./stories.js";
-import defaultConfig from "../config.js?raw"
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.button/storybook/{stories.js → stories.ts}

@@ -12,6 +12,20 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
+import { useDarkMode } from "../../composables/useDarkMode.ts";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UButtonProps } from "../types.ts";
+
+interface UButtonArgs extends UButtonProps {
+  slotTemplate?: string;
+  enum: "variant" | "size";
+}
+
+interface StoryArgType {
+  options?: string[];
+}
+
 export default {
   id: "1010",
   title: "Buttons & Links / Button",
@@ -25,9 +39,9 @@ export default {
   parameters: {
     ...getDocsDescription(UButton.__name),
   },
-};
+} as Meta;
 
-const DefaultTemplate = (args) => ({
+const DefaultTemplate: StoryFn<UButtonArgs> = (args: UButtonArgs) => ({
   components: { UButton, UIcon },
   setup() {
     const slots = getSlotNames(UButton.__name);
@@ -36,15 +50,15 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      ${args.slotTemplate || getSlotsFragment()}
+      ${args.slotTemplate || getSlotsFragment("")}
     </UButton>
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes }) => ({
+const EnumVariantTemplate: StoryFn<UButtonArgs> = (args: UButtonArgs, { argTypes }) => ({
   components: { UButton, URow, UCol },
   setup() {
-    return { args, options: argTypes[args.enum].options };
+    return { args, options: argTypes?.[args.enum]?.options };
   },
   template: `
     <UCol>
@@ -61,16 +75,17 @@ const EnumVariantTemplate = (args, { argTypes }) => ({
   `,
 });
 
-const ColorTemplate = (args, { argTypes }) => ({
+const ColorTemplate: StoryFn<UButtonArgs> = (args, { argTypes }) => ({
   components: { UButton, URow, UCol },
   setup() {
-    const variants = [...argTypes.variant.options, "thirdary"];
+    const variantOptions = (argTypes.variant as StoryArgType)?.options ?? [];
+    const variants = [...Array.from(variantOptions), "thirdary"];
 
     return {
       args,
       variants,
-      colors: argTypes.color.options,
-      shouldBeFilled: (variant, index) => {
+      colors: argTypes?.color?.options,
+      shouldBeFilled: (variant: string, index: number) => {
         return variant === "thirdary" && index === variants.length - 2;
       },
     };
@@ -104,7 +119,7 @@ Sizes.args = { enum: "size" };
 export const Round = EnumVariantTemplate.bind({});
 Round.args = { enum: "variant", round: true };
 
-export const Loading = (args) => ({
+export const Loading: StoryFn<UButtonArgs> = (args) => ({
   components: { UButton, URow },
   setup() {
     const loading = ref(false);
@@ -147,7 +162,7 @@ Colors.args = {};
 export const Square = DefaultTemplate.bind({});
 Square.args = { square: true, icon: "filter_list" };
 
-export const IconProps = (args) => ({
+export const IconProps: StoryFn<UButtonArgs> = (args) => ({
   components: { UButton, URow },
   setup() {
     return { args };
@@ -166,10 +181,12 @@ export const IconProps = (args) => ({
   `,
 });
 
-export const Slots = (args) => ({
+export const Slots: StoryFn<UButtonArgs> = (args) => ({
   components: { UButton, UIcon, URow },
   setup() {
-    return { args };
+    const { isDarkMode } = useDarkMode();
+
+    return { args, isDarkMode };
   },
   template: `
     <URow no-mobile>
@@ -177,8 +194,9 @@ export const Slots = (args) => ({
         <template #left>
           <UIcon
             name="heart_plus"
-            color="green"
             size="sm"
+            color="green"
+            :variant="isDarkMode ? 'dark' : 'default'"
           />
         </template>
       </UButton>
@@ -187,8 +205,9 @@ export const Slots = (args) => ({
         <template #default>
           <UIcon
             name="settings"
-            color="green"
             size="sm"
+            color="green"
+            :variant="isDarkMode ? 'dark' : 'default'"
           />
         </template>
       </UButton>
@@ -197,8 +216,9 @@ export const Slots = (args) => ({
         <template #right>
           <UIcon
             name="delete"
-            color="green"
             size="sm"
+            color="green"
+            :variant="isDarkMode ? 'dark' : 'default'"
           />
         </template>
       </UButton>