vueless 0.0.589 → 0.0.591

package/constants.js

@@ -72,8 +72,8 @@ export const SYSTEM_CONFIG_KEY = {
   ...CVA_CONFIG_KEY,
 };
 
-/* Vueless system non-props defaults */
-export const SYSTEM_NON_PROPS_DEFAULTS = ["library", "style", "weight"];
+/* UIcon non-props defaults */
+export const ICON_NON_PROPS_DEFAULTS = ["library", "path", "style", "weight"];
 
 /* Component to folder mapping. */
 export const COMPONENTS = {

package/package.json

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

package/ui.button/UButton.vue

@@ -186,6 +186,11 @@ const { buttonAttrs, loaderAttrs, leftIconAttrs, rightIconAttrs, centerIconAttrs
     </template>
 
     <!-- This is needed to prevent changing button height -->
-    <div v-if="!label || loading" tabindex="-1" class="invisible w-0" v-text="'invisible'" />
+    <div
+      v-if="(!label && !hasSlotContent(slots['default'])) || loading"
+      tabindex="-1"
+      class="invisible w-0"
+      v-text="'invisible'"
+    />
   </component>
 </template>

package/ui.image-icon/UIcon.vue

@@ -49,6 +49,7 @@ const dynamicComponent = computed(() => {
   const userLibrary = config.value.defaults.library as IconLibraries;
 
   const library = props.internal && isInternalIcon ? VUELESS_LIBRARY : userLibrary;
+  const customLibraryPath = config.value.defaults.path;
   const weight = config.value.defaults.weight;
   const style = config.value.defaults.style;
   const isFill = props.name?.endsWith(FILL_SUFFIX);
@@ -109,6 +110,13 @@ const dynamicComponent = computed(() => {
           ? import(/* @vite-ignore */ `node_modules/${library}/24/${fillType}/${name}.svg?component`)
           : import(/* @vite-ignore */ `/node_modules/${library}/24/${fillType}/${name}.svg?component`);
     },
+    "custom-icons": async () => {
+      return import.meta.env.PROD
+        ? await getIcon([library, name])
+        : isSSR
+          ? import(/* @vite-ignore */ `${customLibraryPath}/${name}.svg?component`)
+          : import(/* @vite-ignore */ `/${customLibraryPath}/${name}.svg?component`);
+    },
   };
   /* eslint-enable prettier/prettier */
 

package/ui.image-icon/config.ts

@@ -38,6 +38,7 @@ export default /*tw*/ {
     interactive: false,
     /* icon library */
     library: "@material-symbols",
+    path: "", // set for `custom-icons` library only.
     style: "outlined",
     weight: 500,
   },

package/ui.image-icon/types.ts

@@ -7,7 +7,12 @@ import type { Props as TippyProps } from "tippy.js";
 
 export type Config = typeof defaultConfig;
 
-export type IconLibraries = "vueless" | "@material-symbols" | "bootstrap-icons" | "heroicons";
+export type IconLibraries =
+  | "vueless"
+  | "@material-symbols"
+  | "bootstrap-icons"
+  | "heroicons"
+  | "custom-icons";
 
 export interface Props {
   /**

package/ui.text-money/config.ts

@@ -24,6 +24,7 @@ export default /*tw*/ {
         xl: "text-xl",
         "2xl": "text-2xl",
         "3xl": "text-3xl",
+        "4xl": "text-4xl",
       },
       planned: {
         true: "opacity-75 before:content-['('] after:content-[')']",
@@ -43,6 +44,7 @@ export default /*tw*/ {
         xl: "text-lg",
         "2xl": "text-xl",
         "3xl": "text-2xl",
+        "4xl": "text-3xl",
       },
     },
   },

package/utils/node/loaderIcon.js

@@ -261,6 +261,7 @@ function copyIcon(name, defaults) {
  * @returns {source: string, destination: string}
  */
 function getIconLibraryPaths(name, defaults) {
+  const customLibraryPath = defaults.path;
   const library = defaults.library;
   const weight = defaults.weight;
   const style = defaults.style;
@@ -283,7 +284,11 @@ function getIconLibraryPaths(name, defaults) {
     "heroicons": {
       source: `${cwd}/node_modules/${library}/24/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`,
       destination: `${cacheIconsPath}/${library}/24/${style}/${name.endsWith("-fill") ? "solid" : "outline"}/${name}.svg`
-    }
+    },
+    "custom-icons": {
+      source: `${cwd}/${customLibraryPath}/${name}.svg`,
+      destination: `${cacheIconsPath}/${library}/${name}.svg`
+    },
   };
   /* eslint-enable prettier/prettier, vue/max-len */
 

package/utils/ui.ts

@@ -3,12 +3,13 @@ import { defineConfig } from "cva";
 import { extendTailwindMerge } from "tailwind-merge";
 import { cloneDeep, isCSR, isSSR } from "./helper.ts";
 import { createGetMergedConfig } from "./node/mergeConfigs.js";
+import { UIcon } from "../ui.image-icon/constants.ts";
 import {
   BRAND_COLOR,
   GRAYSCALE_COLOR,
   DEFAULT_BRAND_COLOR,
+  ICON_NON_PROPS_DEFAULTS,
   TAILWIND_MERGE_EXTENSION,
-  SYSTEM_NON_PROPS_DEFAULTS,
   NESTED_COMPONENT_PATTERN_REG_EXP,
 } from "../constants.js";
 
@@ -110,8 +111,9 @@ export function getDefaults<Props, Config>(defaultConfig: Config, name: Componen
   /* Remove non a props defaults. */
   for (const key in defaults) {
     const isNonPropIcon = /Icon/.test(key) && !/(leftIcon|rightIcon)/.test(key);
+    const isNonPropIconDefaults = ICON_NON_PROPS_DEFAULTS.includes(key) && name === UIcon;
 
-    if (SYSTEM_NON_PROPS_DEFAULTS.includes(key) || isNonPropIcon) {
+    if (isNonPropIcon || isNonPropIconDefaults) {
       delete defaults[key];
     }
   }

package/web-types.json

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