vueless 0.0.260 → 0.0.262

package/constants/index.js

@@ -18,6 +18,7 @@ export const DEFAULT_ROUNDING = 8; /* pixels */
 export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 export const GRAY_COLORS = ["slate", COOL_COLOR, "zinc", "neutral", "stone"];
 export const BRAND_COLORS = [
+  GRAYSCALE_COLOR,
   "red",
   "orange",
   "amber",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.260",
+  "version": "0.0.262",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/service.ui/index.js

@@ -16,6 +16,7 @@ import {
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
   DARK_MODE_SELECTOR,
+  GRAY_COLORS,
 } from "../constants";
 
 /* Load Vueless config from the project root. */
@@ -261,44 +262,53 @@ export default class UIService {
    */
   setTheme = (config = {}) => {
     const isDarkMode = this.setDarkMode(config);
-    const brand = config?.brand ?? vuelessConfig?.brand ?? DEFAULT_BRAND_COLOR;
-    const gray = config?.gray ?? vuelessConfig?.gray ?? DEFAULT_GRAY_COLOR;
     const ring = config?.ring ?? vuelessConfig?.ring ?? DEFAULT_RING;
     const ringOffset = config?.ringOffset ?? vuelessConfig?.ringOffset ?? DEFAULT_RING_OFFSET;
     const rounding = config?.rounding ?? vuelessConfig?.rounding ?? DEFAULT_ROUNDING;
+    let brand = config?.brand ?? vuelessConfig?.brand ?? DEFAULT_BRAND_COLOR;
+    let gray = config?.gray ?? vuelessConfig?.gray ?? DEFAULT_GRAY_COLOR;
 
-    // eslint-disable-next-line prettier/prettier, vue/max-len
-    let brandColor = BRAND_COLORS.some((color) => color === brand) || brand === GRAYSCALE_COLOR ? brand : DEFAULT_BRAND_COLOR;
-    let grayColor = BRAND_COLORS.some((color) => color === gray) ? gray : DEFAULT_GRAY_COLOR;
+    const isBrandColor = BRAND_COLORS.some((color) => color === brand);
+    const isGrayColor = GRAY_COLORS.some((color) => color === gray);
+
+    if (!isBrandColor) {
+      // eslint-disable-next-line no-console
+      console.log(`Brand color '${brand}' is incorrect.`);
+    }
+
+    if (!isGrayColor) {
+      // eslint-disable-next-line no-console
+      console.log(`Gray color '${gray}' is incorrect.`);
+    }
 
     // set default shade related to the selected mode
     const defaultBrandShade = isDarkMode ? 400 : 600;
     const defaultGrayShade = isDarkMode ? 400 : 600;
 
     // handling custom `cool` color
-    if (grayColor === COOL_COLOR) {
-      grayColor = GRAY_COLOR;
+    if (gray === COOL_COLOR) {
+      gray = GRAY_COLOR;
     }
 
     // handling custom `grayscale` color
-    if (brandColor === GRAYSCALE_COLOR) {
-      brandColor = grayColor;
+    if (brand === GRAYSCALE_COLOR) {
+      brand = gray;
     }
 
     const variables = {
       "--vl-ring": `${ring}px`,
       "--vl-ring-offset": `${ringOffset}px`,
       "--vl-rounding": `${Number(rounding) / this.PX_IN_REM}rem`,
-      "--vl-color-gray-default": UIService.convertHexInRgb(colors[grayColor][defaultBrandShade]),
-      "--vl-color-brand-default": UIService.convertHexInRgb(colors[brandColor][defaultGrayShade]),
+      "--vl-color-gray-default": UIService.convertHexInRgb(colors[gray][defaultBrandShade]),
+      "--vl-color-brand-default": UIService.convertHexInRgb(colors[brand][defaultGrayShade]),
     };
 
-    for (const key in colors[grayColor]) {
-      variables[`--vl-color-gray-${key}`] = UIService.convertHexInRgb(colors[grayColor][key]);
+    for (const key in colors[gray]) {
+      variables[`--vl-color-gray-${key}`] = UIService.convertHexInRgb(colors[gray][key]);
     }
 
-    for (const key in colors[brandColor]) {
-      variables[`--vl-color-brand-${key}`] = UIService.convertHexInRgb(colors[brandColor][key]);
+    for (const key in colors[brand]) {
+      variables[`--vl-color-brand-${key}`] = UIService.convertHexInRgb(colors[brand][key]);
     }
 
     const style = document.createElement("style");

package/ui.button/configs/default.config.js

@@ -6,7 +6,7 @@ export default /*tw*/ {
       border border-solid transition
       focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
       focus-within:ring-{color}-700/15 focus-within:ring-dynamic focus-within:ring-offset-dynamic
-      disabled:ring-0 disabled:cursor-not-allowed
+      disabled:ring-0 disabled:cursor-not-allowed cursor-pointer
     `,
     variants: {
       size: {

package/ui.button-link/configs/default.config.js

@@ -12,12 +12,12 @@ export default /*tw*/ {
       disabled: {
         true: "focus-within:ring-0 cursor-not-allowed",
       },
-      block: {
-        true: "w-full",
-      },
       noRing: {
         true: "focus-within:ring-0 focus-within:ring-offset-0",
       },
+      block: {
+        true: "w-full",
+      },
     },
   },
   link: {

package/ui.dropdown-badge/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,15 +15,15 @@ export default function useAttrs(props, { isShownOptions }) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.dropdown-button/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,15 +15,15 @@ export default function useAttrs(props, { isShownOptions }) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.dropdown-link/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props, { isShownOptions }) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,15 +15,15 @@ export default function useAttrs(props, { isShownOptions }) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
+      if (isCVA(value)) {
         return cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.dropdown-list/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -21,15 +21,15 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -39,7 +39,7 @@ export default function useAttrs(props) {
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...subGroupLabelAttrs.value,
-        class: cx([subGroupLabelAttrs.value.class, optionClasses.value]),
+        class: cx([optionClasses.value, subGroupLabelAttrs.value.class]),
       }));
     }
 
@@ -48,7 +48,7 @@ export default function useAttrs(props) {
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...groupLabelAttrs.value,
-        class: cx([groupLabelAttrs.value.class, optionClasses.value]),
+        class: cx([optionClasses.value, groupLabelAttrs.value.class]),
       }));
     }
   }

package/ui.dropdown-list/configs/default.config.js

@@ -7,7 +7,7 @@ export default /*tw*/ {
   `,
   list: "m-1 inline-block list-none align-top w-full p-0 bg-white opacity-1 hover:transition",
   subGroupLabel: {
-    base: "pointer-events-none bg-transparent !font-medium !leading-none !uppercase !text-gray-500/[85] pt-1",
+    base: "pointer-events-none bg-transparent font-medium leading-none uppercase text-gray-400 pt-2",
     variants: {
       size: {
         sm: "text-2xs",
@@ -17,12 +17,12 @@ export default /*tw*/ {
     },
   },
   groupLabel: {
-    base: "pointer-events-none bg-transparent !font-medium !leading-none !uppercase !text-gray-500/[85] pt-6 group-first/item:pt-2",
+    base: "pointer-events-none bg-transparent font-medium leading-none uppercase text-gray-400 pt-4 pb-1 group-first/item:pt-2",
     variants: {
       size: {
-        sm: "text-2xs pb-1 mt-4",
-        md: "text-xs pb-1",
-        lg: "text-sm pb-1 mt-4",
+        sm: "text-2xs",
+        md: "text-xs",
+        lg: "text-sm",
       },
     },
   },

package/ui.form-checkbox/configs/default.config.js

@@ -51,12 +51,12 @@ export default /*tw*/ {
     disabled: false,
   },
   safelist: (colors) => [
-    { pattern: `text-(${colors})-600` },
     { pattern: `bg-(${colors})-600` },
     { pattern: `bg-(${colors})-700`, variants: ["hover"] },
     { pattern: `bg-(${colors})-800`, variants: ["active"] },
     { pattern: `border-(${colors})-500`, variants: ["focus"] },
     { pattern: `border-(${colors})-800`, variants: ["active"] },
+    { pattern: `text-(${colors})-600`, variants: ["checked"] },
     { pattern: `ring-(${colors})-700`, variants: ["focus"] },
   ],
 };

package/ui.form-checkbox/index.stories.js

@@ -81,7 +81,7 @@ const ValueTypesTemplate = (args) => ({
           />
         </UCheckboxGroup>
 
-        <span class="font-normal text-gray-500/[85] text-xs pl-0 mt-1">
+        <span class="font-normal text-gray-400 text-xs pl-0 mt-1">
           {{ arrayValue }}
         </span>
       </div>

package/ui.form-input-file/configs/default.config.js

@@ -9,6 +9,9 @@ export default /*tw*/ {
       error: {
         true: "border-red-300 hover:border-red-400",
       },
+      disabled: {
+        true: "pointer-events-none bg-gray-100",
+      },
     },
     compoundVariants: [
       { labelAlign: "topInside", label: true, size: "sm", class: "pt-7" },
@@ -19,7 +22,7 @@ export default /*tw*/ {
   descriptionTop: "{UText} text-gray-700 mb-2",
   descriptionBottom: "{UText} text-gray-700 mt-2",
   contentWrapper: {
-    base: "p-3 gap-6 w-full rounded-dynamic bg-brand-50 relative flex justify-between items-start",
+    base: "p-3 gap-6 flex justify-between items-start relative w-full rounded-dynamic bg-brand-50",
     variants: {
       multiple: {
         false: "items-center",
@@ -27,6 +30,9 @@ export default /*tw*/ {
       error: {
         true: "bg-red-50",
       },
+      disabled: {
+        true: "bg-gray-200",
+      },
     },
   },
   placeholder: {
@@ -39,7 +45,14 @@ export default /*tw*/ {
       },
     },
   },
-  button: "{UButton} hover:cursor-pointer",
+  chooseFileButton: {
+    component: "{UButton}",
+    variants: {
+      disabled: {
+        true: "opacity-75",
+      },
+    },
+  },
   chooseFileIconName: "attach_file",
   clearButton: "{UButton}",
   clearIconName: "close",
@@ -47,7 +60,7 @@ export default /*tw*/ {
   removeItemIconName: "close",
   dropzoneWrapperHover: "border-gray-400 border-dashed",
   dropzoneWrapperError: "hover:border-red-400 border-dashed border-red-300",
-  input: "sr-only pointer-events-none size-0 opacity-0",
+  input: "sr-only",
   buttonWrapper: "flex gap-3 items-center",
   fileList: "{UFiles} w-full",
   i18n: {
@@ -60,7 +73,8 @@ export default /*tw*/ {
     size: "md",
     labelAlign: "topInside",
     allowedFileTypes: [],
-    multiple: false,
     maxFileSize: 0,
+    multiple: false,
+    disabled: false,
   },
 };

package/ui.form-input-file/index.vue

@@ -5,6 +5,7 @@
     :label="label"
     :error="error"
     :align="labelAlign"
+    :disabled="disabled"
     :description="description"
     v-bind="labelAttrs"
   >
@@ -23,7 +24,7 @@
         <UFiles :size="size" v-bind="fileListAttrs" :file-list="fileList">
           <template #right="{ file }">
             <UIcon
-              v-if="props.multiple"
+              v-if="props.multiple && !disabled"
               pill
               internal
               interactive
@@ -40,14 +41,16 @@
           <template v-if="Array.isArray(currentFiles) || !currentFiles">
             <UButton
               filled
+              no-ring
               :for="id"
               tag="label"
               variant="thirdary"
               :size="buttonSize"
               :icon-right="config.chooseFileIconName"
               :label="currentLocale.uploadFile"
+              :disabled="disabled"
+              v-bind="chooseFileButtonAttrs"
               :data-cy="`${dataCy}-upload`"
-              v-bind="buttonAttrs"
             />
 
             <input
@@ -62,12 +65,14 @@
           </template>
 
           <UButton
-            v-if="isValue"
+            v-if="isValue && !disabled"
             pill
             square
             filled
+            no-ring
             variant="thirdary"
             :size="buttonSize"
+            :disabled="disabled"
             :icon-left="config.clearIconName"
             v-bind="clearButtonAttrs"
             :data-cy="`${dataCy}-clear`"
@@ -178,6 +183,14 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Disable the input.
+   */
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputFile).default.disabled,
+  },
+
   /**
    * Generates unique element id.
    * @ignore
@@ -225,7 +238,7 @@ const fileInputRef = ref(null);
 const {
   config,
   labelAttrs,
-  buttonAttrs,
+  chooseFileButtonAttrs,
   dropzoneWrapperAttrs,
   descriptionTopAttrs,
   descriptionBottomAttrs,

package/ui.form-radio/configs/default.config.js

@@ -27,9 +27,9 @@ export default /*tw*/ {
     disabled: false,
   },
   safelist: (colors) => [
-    { pattern: `text-(${colors})-600` },
     { pattern: `border-(${colors})-500`, variants: ["focus"] },
     { pattern: `border-(${colors})-800`, variants: ["active"] },
+    { pattern: `text-(${colors})-600`, variants: ["checked"] },
     { pattern: `ring-(${colors})-700`, variants: ["focus"] },
   ],
 };

package/ui.image-icon/configs/default.config.js

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: "",
     variants: {
       pill: {
-        true: "rounded-full bg-{color}-500/5",
+        true: "rounded-full bg-{color}-600/5",
       },
     },
     compoundVariants: [
@@ -19,8 +19,8 @@ export default /*tw*/ {
       { pill: true, size: "3xl", class: "p-4" },
       { pill: true, size: "4xl", class: "p-5" },
       { pill: true, size: "5xl", class: "p-5" },
-      { pill: true, color: "white", class: "bg-white" },
-      { pill: true, color: "grayscale", class: "bg-gray-900" },
+      { pill: true, color: "white", class: "bg-white/5" },
+      { pill: true, color: "grayscale", class: "bg-gray-700/5" },
     ],
   },
   container: {
@@ -42,15 +42,15 @@ export default /*tw*/ {
       },
       variant: {
         light: "text-{color}-400",
-        default: "text-{color}-500",
-        dark: "text-{color}-700",
+        default: "text-{color}-600",
+        dark: "text-{color}-800",
       },
       color: {
         white: "text-white",
         grayscale: "text-gray-900",
       },
       interactive: {
-        true: "cursor-pointer hover:opacity-50, active:opacity-50",
+        true: "cursor-pointer hover:opacity-50 active:opacity-50",
       },
     },
   },

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.260",
+  "version": "0.0.262",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4312,6 +4312,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "disabled",
+              "description": "Disable the input.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "id",
               "description": "@ignore: Generates unique element id.",