vueless 0.0.472 → 0.0.474

package/constants.js

@@ -13,6 +13,8 @@ export const DEFAULT_BRAND_COLOR = GRAYSCALE_COLOR;
 export const DEFAULT_GRAY_COLOR = COOL_COLOR;
 export const DEFAULT_RING = 4; /* pixels */
 export const DEFAULT_RING_OFFSET = 0; /* pixels */
+export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
+export const DEFAULT_RING_OFFSET_COLOR_DARK = "#4b5563"; // gray-600
 export const DEFAULT_ROUNDING = 8; /* pixels */
 
 /* Vueless supported colors and shades */

package/package.json

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

package/preset.tailwind.js

@@ -9,6 +9,7 @@ import {
   DEFAULT_ROUNDING,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
+  DEFAULT_RING_OFFSET_COLOR_LIGHT,
 } from "./constants.js";
 
 const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
@@ -81,10 +82,9 @@ export const vuelessTailwindConfig = {
       ringOffsetWidth: {
         dynamic: "var(--vl-ring-offset)",
       },
-      // TODO: Add this feature
-      // ringOffsetColor: {
-      //   dynamic: "var(--vl-ring-offset-color)",
-      // },
+      ringOffsetColor: {
+        dynamic: "var(--vl-ring-offset-color)",
+      },
       borderRadius: {
         dynamic: "var(--vl-rounding)",
       },
@@ -94,6 +94,7 @@ export const vuelessTailwindConfig = {
         // TODO: Set colors from vueless.config.{js|ts} if it present.
         "var(--vl-ring)": DEFAULT_RING,
         "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
+        "var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
         "var(--vl-rounding)": DEFAULT_ROUNDING,
         ...getReplacementColors(GRAY_COLOR, GRAY_COLOR),
         ...getReplacementColors(BRAND_COLOR, GRAY_COLOR),

package/ui.form-input-number/UInputNumber.vue

@@ -1,5 +1,14 @@
 <template>
-  <div :data-test="dataTest" v-bind="wrapperAttrs">
+  <ULabel
+    :label="label"
+    :description="description"
+    :disabled="disabled"
+    :error="error"
+    :size="size"
+    :align="labelAlign"
+    :data-test="dataTest"
+    v-bind="labelAttrs"
+  >
     <UButton
       variant="thirdary"
       size="sm"
@@ -22,7 +31,6 @@
 
     <div v-bind="numberAttrs">
       <div v-bind="valueAttrs" v-text="count" />
-      <div v-bind="labelAttrs" v-text="label" />
     </div>
 
     <UButton
@@ -44,7 +52,7 @@
         v-bind="addIconAttrs"
       />
     </UButton>
-  </div>
+  </ULabel>
 </template>
 
 <script setup>
@@ -52,6 +60,7 @@ import { computed } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
+import ULabel from "../ui.form-label/ULabel.vue";
 import { getDefault } from "../utils/utilUI.js";
 
 import defaultConfig from "./config.js";
@@ -74,7 +83,7 @@ const props = defineProps({
    */
   step: {
     type: Number,
-    default: 1,
+    default: getDefault(defaultConfig, UInputNumber).step,
   },
 
   /**
@@ -82,7 +91,7 @@ const props = defineProps({
    */
   min: {
     type: Number,
-    default: 1,
+    default: getDefault(defaultConfig, UInputNumber).min,
   },
 
   /**
@@ -90,7 +99,7 @@ const props = defineProps({
    */
   max: {
     type: Number,
-    default: 999,
+    default: getDefault(defaultConfig, UInputNumber).max,
   },
 
   /**
@@ -176,7 +185,6 @@ const {
   removeIconAttrs,
   addButtonAttrs,
   addIconAttrs,
-  wrapperAttrs,
   numberAttrs,
 } = useAttrs(props);
 

package/ui.form-input-number/config.js

@@ -1,6 +1,9 @@
 export default /*tw*/ {
-  wrapper: "flex items-center space-x-6",
-  number: "flex items-center flex-col",
+  label: {
+    component: "{ULabel}",
+    content: "gap-6 items-center",
+  },
+  number: "",
   removeButton: "{UButton}",
   removeIcon: "{UIcon}",
   addButton: "{UButton}",
@@ -13,20 +16,18 @@ export default /*tw*/ {
         md: "text-base",
         lg: "text-lg",
       },
-    },
-  },
-  label: {
-    base: "pt-1 !leading-none text-gray-500",
-    variants: {
-      size: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
+      disabled: {
+        true: "focus-within:ring-0 focus-within:ring-offset-0 pointer-events-none",
       },
     },
   },
   defaults: {
     size: "md",
+    labelAlign: "topWithDesc",
+    disabled: false,
+    step: 1,
+    min: 1,
+    max: 999,
     /* icons */
     removeIcon: "remove",
     addIcon: "add",

package/utils/utilTheme.js

@@ -9,6 +9,8 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
+  DEFAULT_RING_OFFSET_COLOR_LIGHT,
+  DEFAULT_RING_OFFSET_COLOR_DARK,
   DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
@@ -33,6 +35,17 @@ export function setTheme(config = {}) {
   const isDarkMode = setDarkMode(config);
   const ring = config?.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
   const ringOffset = config?.ringOffset ?? vuelessConfig.ringOffset ?? DEFAULT_RING_OFFSET;
+
+  const defaultRingOffsetColorDark =
+    config?.ringOffsetColorDark ??
+    vuelessConfig.ringOffsetColorDark ??
+    DEFAULT_RING_OFFSET_COLOR_DARK;
+
+  const defaultRingOffsetColorLight =
+    config?.ringOffsetColorLight ??
+    vuelessConfig.ringOffsetColorLight ??
+    DEFAULT_RING_OFFSET_COLOR_LIGHT;
+
   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;
@@ -52,6 +65,9 @@ export function setTheme(config = {}) {
 
   const defaultBrandShade = isDarkMode ? 400 : 600;
   const defaultGrayShade = isDarkMode ? 400 : 600;
+  const defaultRingOffsetColor = isDarkMode
+    ? defaultRingOffsetColorDark
+    : defaultRingOffsetColorLight;
 
   if (gray === COOL_COLOR) {
     gray = GRAY_COLOR;
@@ -64,6 +80,7 @@ export function setTheme(config = {}) {
   const variables = {
     "--vl-ring": `${ring}px`,
     "--vl-ring-offset": `${ringOffset}px`,
+    "--vl-ring-offset-color": `rgb(${convertHexInRgb(defaultRingOffsetColor)})`,
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
     "--vl-color-gray-default": convertHexInRgb(colors[gray][defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand][defaultGrayShade]),

package/utils/utilUI.js

@@ -55,6 +55,7 @@ const twMerge = extendTailwindMerge(
         classGroups: {
           "ring-w": [{ ring: ["dynamic"] }],
           "ring-offset-w": [{ "ring-offset": ["dynamic"] }],
+          "ring-offset-color": [{ "ring-offset": ["dynamic"] }],
           "font-size": [{ text: ["2xs"] }],
           rounded: [{ rounded: ["dynamic"] }],
         },

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.472",
+  "version": "0.0.474",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5351,7 +5351,7 @@
                 "kind": "expression",
                 "type": "'top' | 'topWithDesc' | 'left' | 'right'"
               },
-              "default": "getDefault(defaultConfig, UInputNumber).labelAlign"
+              "default": "topWithDesc"
             },
             {
               "name": "description",
@@ -5387,7 +5387,7 @@
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "getDefault(defaultConfig, UInputNumber).disabled"
+              "default": "false"
             },
             {
               "name": "config",