vueless 0.0.594 → 0.0.596

package/package.json

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

package/ui.button/UButton.vue

@@ -2,7 +2,6 @@
 import { computed, ref, watchEffect, useId, watch, useSlots } from "vue";
 
 import useUI from "../composables/useUI.ts";
-import { useDarkMode } from "../composables/useDarkMode.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 import { getDefaults } from "../utils/ui.ts";
 
@@ -10,20 +9,19 @@ import ULoader from "../ui.loader/ULoader.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
 
 import defaultConfig from "./config.ts";
-import { UButton } from "./constants.ts";
+import { COMPONENT_NAME } from "./constants.ts";
 
 import type { Props, LoaderSize, IconSize, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, UButton),
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   label: "",
 });
 
 const slots = useSlots();
 const elementId = props.id || useId();
-const { isDarkMode } = useDarkMode();
 
 const buttonRef = ref<HTMLElement | null>(null);
 const buttonStyle = ref({});
@@ -55,12 +53,6 @@ const iconSize = computed(() => {
   return sizes[props.size] as IconSize;
 });
 
-const iconColor = computed(() => {
-  const primaryColor = isDarkMode.value ? "black" : "white";
-
-  return props.variant === "primary" ? primaryColor : props.color;
-});
-
 watch(
   () => props.loading,
   (newValue, oldValue) => {
@@ -119,7 +111,7 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
     :data-test="dataTest"
   >
     <template v-if="loading">
-      <ULoader :loading="loading" :size="loaderSize" :color="iconColor" v-bind="loaderAttrs" />
+      <ULoader :loading="loading" :size="loaderSize" color="inherit" v-bind="loaderAttrs" />
     </template>
 
     <template v-else>
@@ -127,15 +119,14 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
         @slot Use it to add something before the label.
         @binding {string} icon-name
         @binding {string} icon-size
-        @binding {string} icon-color
       -->
-      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="iconColor">
+      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize">
         <UIcon
           v-if="leftIcon"
           internal
+          color="inherit"
           :name="leftIcon"
           :size="iconSize"
-          :color="iconColor"
           v-bind="leftIconAttrs"
         />
       </slot>
@@ -145,21 +136,14 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
         @binding {string} label
         @binding {string} icon-name
         @binding {string} icon-size
-        @binding {string} icon-color
       -->
-      <slot
-        name="default"
-        :label="label"
-        :icon-name="icon"
-        :icon-size="iconSize"
-        :icon-color="iconColor"
-      >
+      <slot name="default" :label="label" :icon-name="icon" :icon-size="iconSize">
         <UIcon
           v-if="icon"
           internal
+          color="inherit"
           :name="icon"
           :size="iconSize"
-          :color="iconColor"
           v-bind="centerIconAttrs"
         />
         <template v-else>
@@ -171,15 +155,14 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
         @slot Use it to add something after the label.
         @binding {string} icon-name
         @binding {string} icon-size
-        @binding {string} icon-color
       -->
-      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="iconColor">
+      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize">
         <UIcon
           v-if="rightIcon"
           internal
+          color="inherit"
           :name="rightIcon"
           :size="iconSize"
-          :color="iconColor"
           v-bind="rightIconAttrs"
         />
       </slot>

package/ui.button/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const UButton = "UButton";
+export const COMPONENT_NAME = "UButton";

package/ui.dropdown-button/UDropdownButton.vue

@@ -11,7 +11,7 @@ import UDropdownList from "../ui.dropdown-list/UDropdownList.vue";
 import { vClickOutside } from "../directives";
 
 import defaultConfig from "./config.ts";
-import { UDropdownButton, BUTTON_VARIANT } from "./constants.ts";
+import { UDropdownButton } from "./constants.ts";
 
 import type { Props, IconSize, DropdownSize, Config } from "./types.ts";
 import type { Option } from "../ui.dropdown-list/types.ts";
@@ -41,10 +41,6 @@ const dropdownListRef = useTemplateRef<UDropdownListRef>("dropdown-list");
 
 const elementId = props.id || useId();
 
-const iconColor = computed(() => {
-  return props.variant === BUTTON_VARIANT.primary ? "white" : props.color;
-});
-
 const iconSize = computed(() => {
   const sizes = {
     "2xs": "xs",
@@ -146,8 +142,8 @@ const { config, dropdownButtonAttrs, dropdownListAttrs, dropdownIconAttrs, wrapp
           <UIcon
             v-if="!noIcon"
             internal
+            color="inherit"
             :size="iconSize"
-            :color="iconColor"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
             :data-test="`${dataTest}-dropdown`"

package/ui.dropdown-button/constants.ts

@@ -3,7 +3,3 @@
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
 export const UDropdownButton = "UDropdownButton";
-
-export const BUTTON_VARIANT = {
-  primary: "primary",
-};

package/ui.form-date-picker/UDatePicker.vue

@@ -288,7 +288,7 @@ watchEffect(() => {
       :disabled="disabled"
       :size="size"
       :left-icon="leftIcon"
-      :right-icon="rightIcon"
+      :right-icon="rightIcon || config.defaults.calendarIcon"
       v-bind="isShownCalendar ? datepickerInputActiveAttrs : datepickerInputAttrs"
       @input="onTextInput"
       @focus="activate"
@@ -306,7 +306,7 @@ watchEffect(() => {
         <!--
           @slot Use it add an icon before the date.
           @binding {string} icon-name
-          @binding {string} icon-nize
+          @binding {string} icon-size
         -->
         <slot name="left-icon" :icon-name="iconName" :icon-size="iconSize" />
       </template>

package/ui.form-date-picker/config.ts

@@ -130,6 +130,6 @@ export default /*tw*/ {
     timepicker: false,
     disabled: false,
     /* icons */
-    rightIcon: "calendar_month-fill",
+    calendarIcon: "calendar_month-fill",
   },
 };

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -92,8 +92,8 @@ type UButtonRef = InstanceType<typeof UButton>;
 type UInputRef = InstanceType<typeof UInput>;
 
 const isShownMenu = ref(false);
-const wrapperRef = useTemplateRef("wrapper");
-const menuRef = useTemplateRef("menu");
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const menuRef = useTemplateRef<HTMLDivElement>("menu");
 const buttonRef = useTemplateRef<UButtonRef>("button");
 const buttonPrevRef = useTemplateRef<UButtonRef>("button-prev");
 const buttonNextRef = useTemplateRef<UButtonRef>("button-next");
@@ -594,7 +594,7 @@ watchEffect(() => {
       :error="error"
       readonly
       :left-icon="leftIcon"
-      :right-icon="rightIcon"
+      :right-icon="rightIcon || config.defaults.calendarIcon"
       v-bind="isShownMenu ? datepickerActiveInputAttrs : datepickerInputAttrs"
       @focus="activate"
     >

package/ui.form-date-picker-range/config.ts

@@ -217,7 +217,7 @@ export default /*tw*/ {
     maxDate: undefined,
     minDate: undefined,
     /* icons */
-    rightIcon: "calendar_month-fill",
+    calendarIcon: "calendar_month-fill",
     nextIcon: "keyboard_arrow_right",
     prevIcon: "keyboard_arrow_left",
     ownRangeIcon: "apps",

package/ui.image-icon/config.ts

@@ -11,6 +11,7 @@ export default /*tw*/ {
         white: "text-white",
         black: "text-gray-900",
         grayscale: "text-gray-900 dark:text-white",
+        inherit: "text-inherit",
       },
       interactive: {
         true: "cursor-pointer",

package/ui.image-icon/types.ts

@@ -50,6 +50,7 @@ export interface Props {
     | "gray"
     | "black"
     | "white"
+    | "inherit"
     | "brand";
 
   /**

package/ui.loader/config.ts

@@ -22,6 +22,7 @@ export default /*tw*/ {
         white: "bg-white",
         black: "bg-gray-900",
         grayscale: "bg-gray-900 dark:bg-white",
+        inherit: "bg-current",
       },
       size: {
         sm: `

package/ui.loader/types.ts

@@ -35,6 +35,7 @@ export interface Props {
     | "gray"
     | "black"
     | "white"
+    | "inherit"
     | "brand";
 
   /**

package/ui.text-alert/UAlert.vue

@@ -69,12 +69,6 @@ const closeButtonColor = computed(() => {
   return props.color;
 });
 
-const iconColor = computed(() => {
-  if (props.color === "white") return "gray";
-
-  return props.variant === "primary" ? "white" : props.color;
-});
-
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -146,19 +140,14 @@ const {
       >
         <!--
           @slot Use it to add something instead of the close button.
+          @binding {string} icon-name
           @binding {string} icon-size
-          @binding {string} icon-color
         -->
-        <slot
-          name="close"
-          :icon-name="config.defaults.closeIcon"
-          :icon-size="closeIconSize"
-          :icon-color="iconColor"
-        >
+        <slot name="close" :icon-name="config.defaults.closeIcon" :icon-size="closeIconSize">
           <UIcon
             internal
+            color="inherit"
             :size="closeIconSize"
-            :color="iconColor"
             :name="config.defaults.closeIcon"
             v-bind="closeIconAttrs"
             :data-test="`${dataTest}-button`"

package/ui.text-badge/UBadge.vue

@@ -55,10 +55,6 @@ const iconSize = computed(() => {
   return sizes[props.size] as IconSize;
 });
 
-const iconColor = computed(() => {
-  return props.variant === "primary" ? "white" : props.color;
-});
-
 function onFocus() {
   emit("focus");
 }
@@ -115,15 +111,14 @@ const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs }
           @slot Use it to add icon before the text.
           @binding {string} icon-name
           @binding {string} icon-size
-          @binding {string} icon-color
         -->
-      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="iconColor">
+      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize">
         <UIcon
           v-if="leftIcon"
           internal
           :name="leftIcon"
           :size="iconSize"
-          :color="iconColor"
+          color="inherit"
           v-bind="leftIconAttrs"
         />
       </slot>
@@ -133,21 +128,14 @@ const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs }
         @binding {string} label
         @binding {string} icon-name
         @binding {string} icon-size
-        @binding {string} icon-color
       -->
-      <slot
-        name="default"
-        :label="label"
-        :icon-name="icon"
-        :icon-size="iconSize"
-        :icon-color="iconColor"
-      >
+      <slot name="default" :label="label" :icon-name="icon" :icon-size="iconSize">
         <UIcon
           v-if="icon"
           internal
           :name="icon"
           :size="iconSize"
-          :color="iconColor"
+          color="inherit"
           v-bind="centerIconAttrs"
         />
         <template v-else>
@@ -159,14 +147,13 @@ const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs }
           @slot Use it to add icon after the text.
           @binding {string} icon-name
           @binding {string} icon-size
-          @binding {string} icon-color
         -->
-      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="iconColor">
+      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize">
         <UIcon
           v-if="rightIcon"
           :name="rightIcon"
           :size="iconSize"
-          :color="iconColor"
+          color="inherit"
           internal
           v-bind="rightIconAttrs"
         />

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.594",
+  "version": "0.0.596",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -310,15 +310,12 @@
               "description": "Use it to add something instead of the close button.",
               "bindings": [
                 {
+                  "type": "string",
                   "name": "icon-name"
                 },
                 {
                   "type": "string",
                   "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             },
@@ -688,10 +685,6 @@
                 {
                   "type": "string",
                   "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             },
@@ -711,10 +704,6 @@
                 {
                   "type": "string",
                   "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             },
@@ -730,10 +719,6 @@
                 {
                   "type": "string",
                   "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             }
@@ -999,10 +984,6 @@
                 {
                   "type": "string",
                   "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             },
@@ -1022,10 +1003,6 @@
                 {
                   "type": "string",
                   "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             },
@@ -1041,10 +1018,6 @@
                 {
                   "type": "string",
                   "name": "icon-size"
-                },
-                {
-                  "type": "string",
-                  "name": "icon-color"
                 }
               ]
             }
@@ -3075,8 +3048,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "calendar_month-fill"
+              }
             },
             {
               "name": "disabled",
@@ -3160,6 +3132,7 @@
                   "name": "icon-name"
                 },
                 {
+                  "type": "string",
                   "name": "icon-size"
                 }
               ]
@@ -3371,8 +3344,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "calendar_month-fill"
+              }
             },
             {
               "name": "label",
@@ -5601,6 +5573,7 @@
                 "gray",
                 "black",
                 "white",
+                "inherit",
                 "brand"
               ],
               "value": {
@@ -7671,6 +7644,7 @@
                 "gray",
                 "black",
                 "white",
+                "inherit",
                 "brand"
               ],
               "value": {