vueless 0.0.550 → 0.0.552

package/package.json

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

package/plugin-vite.d.ts

@@ -1,12 +1,7 @@
-declare module "unplugin-vue-components" {
-  export function VuelessUnpluginComponents(options?: unknown): import("vite").Plugin<unknown> & {
-    api: import("unplugin-vue-components/types.js").PublicPluginAPI;
-  };
-}
-
-declare module "Vueless" {
+declare module "vueless/plugin-vite" {
   import { Plugin } from "vite";
   import { Config } from "svgo";
+
   function Vueless(options?: {
     env?: string;
     mode?: string;
@@ -17,7 +12,12 @@ declare module "Vueless" {
     svgo?: boolean;
     defaultImport?: "url" | "raw" | "component";
   }): Plugin;
-  export default Vueless;
+
+  function VuelessUnpluginComponents(options?: unknown): import("vite").Plugin<unknown> & {
+    api: import("unplugin-vue-components/types.js").PublicPluginAPI;
+  };
+
+  export { Vueless, VuelessUnpluginComponents };
 }
 
 declare module "*.svg?component" {

package/ui.form-color-picker/config.js

@@ -23,6 +23,26 @@ export default /*tw*/ {
       disabled:border-{color}-400 disabled:bg-{color}-400
     `,
   },
+  // TODO: Add dynamic colors parsing from the config
+  safelistColors: [
+    "red",
+    "orange",
+    "amber",
+    "yellow",
+    "lime",
+    "green",
+    "emerald",
+    "teal",
+    "cyan",
+    "sky",
+    "blue",
+    "indigo",
+    "violet",
+    "purple",
+    "fuchsia",
+    "pink",
+    "rose",
+  ],
   defaults: {
     size: "md",
     name: "colorPicker",

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

@@ -123,6 +123,7 @@ export default /*tw*/ {
     dateTimeFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
+    /* icons */
     rightIcon: "calendar_month-fill",
   },
 };

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

@@ -9,14 +9,14 @@ import type { UseAttrs } from "../types.ts";
 import type { UDatePickerProps, Config } from "./types.ts";
 import type { Config as UCalendarConfig } from "../ui.form-calendar/types.ts";
 
-interface DatePickerState {
+interface ComponentState {
   isTop: Ref<boolean>;
   isRight: Ref<boolean>;
 }
 
 export default function useAttrs(
   props: UDatePickerProps<unknown>,
-  { isTop, isRight }: DatePickerState,
+  { isTop, isRight }: ComponentState,
 ): UseAttrs<Config> {
   const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 

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

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

package/ui.form-radio/URadio.vue

@@ -73,7 +73,7 @@ watchEffect(() => {
   emit("update:modelValue", props.value);
 });
 
-function onChange(event: CustomEvent) {
+function onChange(event: Event) {
   const target = event.target as HTMLInputElement;
 
   if (setRadioGroupSelectedItem) {

package/utils/node/vuelessResolver.js

@@ -14,15 +14,19 @@ export function componentResolver(componentName) {
   const folder = COMPONENTS[componentName];
 
   if (folder) {
-    return { from: `vueless/${folder}/${componentName}.vue` };
+    return {
+      from: `vueless/${folder}/${componentName}.vue`,
+    };
   }
 }
 
 export const directiveResolver = {
   type: "directive",
   resolve(name) {
+    const folder = name[0].toLowerCase() + name.slice(1);
+
     return {
-      from: `vueless/directives/v${name}.js`,
+      from: `vueless/directives/${folder}/v${name}.ts`,
     };
   },
 };

package/web-types.json

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