vueless 0.0.825-beta.0 → 0.0.825-beta.2

package/composables/useUI.ts

@@ -1,4 +1,4 @@
-import { ref, watch, watchEffect, getCurrentInstance, toValue, useAttrs, computed } from "vue";
+import { ref, watch, getCurrentInstance, toValue, useAttrs, computed } from "vue";
 import { isEqual } from "lodash-es";
 
 import { cx, cva, setColor, vuelessConfig, getMergedConfig } from "../utils/ui.ts";
@@ -56,16 +56,22 @@ export default function useUI<T>(
   const firstClassKey = Object.keys(defaultConfig || {})[0];
   const config = ref({}) as Ref<ComponentConfigFull<T>>;
 
-  watchEffect(() => {
-    const propsConfig = props.config as ComponentConfigFull<T>;
+  watch(
+    () => props.config,
+    (newVal, oldVal) => {
+      if (isEqual(newVal, oldVal)) return;
+
+      const propsConfig = props.config as ComponentConfigFull<T>;
 
-    config.value = getMergedConfig({
-      defaultConfig,
-      globalConfig,
-      propsConfig,
-      vuelessStrategy,
-    }) as ComponentConfigFull<T>;
-  });
+      config.value = getMergedConfig({
+        defaultConfig,
+        globalConfig,
+        propsConfig,
+        vuelessStrategy,
+      }) as ComponentConfigFull<T>;
+    },
+    { deep: true, immediate: true },
+  );
 
   /**
    * Get classes by given key (including CVA if config set).

package/package.json

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

package/tailwind.css

@@ -1,23 +1,33 @@
+/* ------ Tailwind plugins ------ */
+
 @plugin "@tailwindcss/forms" {
     strategy: base;
 }
 
+/* ------ Development sources ------ */
+
 @source "../node_modules/.cache/vueless/safelist.txt";
-@source "../node_modules/vueless";
-@source "../vueless.config.ts";
-@source "../vueless.config.js";
-@source "../.vueless";
 
+/* ------ Production sources ------ */
+
+@source "../.cache/vueless/safelist.txt";
+@source "../vueless";
+
+/* ------ Color mode settings ------ */
 
 @variant light (&:where(.vl-light, .vl-light *));
 @variant dark (&:where(.vl-dark, .vl-dark *));
 
+/* ------ Base styles ------ */
+
 @layer base {
     body {
         @apply antialiased text-(--vl-text) bg-(--vl-bg) scheme-light dark:scheme-dark;
     }
 }
 
+/* ------ Tailwind theme settings ------ */
+
 @theme {
     /* Primary colors */
     --color-primary-50: var(--vl-primary-50);
@@ -89,7 +99,7 @@
     --spacing-safe-right: "env(safe-area-inset-right)";
 }
 
-/* Text color utilities */
+/* ------ Text color utilities ------ */
 
 @utility text-default {
     color: var(--vl-text);
@@ -111,7 +121,7 @@
     color: var(--vl-text-inverted);
 }
 
-/* Border color utilities */
+/* ------ Border color utilities ------  */
 
 @utility border-default {
     border-color: var(--vl-border);
@@ -129,7 +139,7 @@
     border-color: var(--vl-border-muted);
 }
 
-/* Background color utilities */
+/* ------ Background color utilities ------ */
 
 @utility bg-default {
     background-color: var(--vl-bg);
@@ -151,7 +161,7 @@
     background-color: var(--vl-bg-inverted);
 }
 
-/* Outline width utilities */
+/* ------ Outline width utilities ------ */
 
 @utility outline-small {
     outline-style: var(--tw-outline-style);
@@ -167,64 +177,3 @@
     outline-style: var(--tw-outline-style);
     outline-width: var(--vl-outline-lg);
 }
-
-/* Defined variables to prevent IDE's unused property error. */
-:root {
-    --vl-primary-50: "";
-    --vl-primary-100: "";
-    --vl-primary-200: "";
-    --vl-primary-300: "";
-    --vl-primary-400: "";
-    --vl-primary-500: "";
-    --vl-primary-600: "";
-    --vl-primary-700: "";
-    --vl-primary-800: "";
-    --vl-primary-900: "";
-    --vl-primary-950: "";
-    --vl-primary: "";
-    --vl-primary-lifted: "";
-    --vl-primary-accented: "";
-    --vl-neutral: "";
-    --vl-neutral-lifted: "";
-    --vl-neutral-accented: "";
-    --vl-info: "";
-    --vl-info-lifted: "";
-    --vl-info-accented: "";
-    --vl-error: "";
-    --vl-error-lifted: "";
-    --vl-error-accented: "";
-    --vl-warning: "";
-    --vl-warning-lifted: "";
-    --vl-warning-accented: "";
-    --vl-success: "";
-    --vl-success-lifted: "";
-    --vl-success-accented: "";
-    --vl-grayscale: "";
-    --vl-grayscale-lifted: "";
-    --vl-grayscale-accented: "";
-    --vl-radius-sm: "";
-    --vl-radius-md: "";
-    --vl-radius-lg: "";
-    --vl-text-xs: "";
-    --vl-text-sm: "";
-    --vl-text-md: "";
-    --vl-text-lg: "";
-    --vl-text: "";
-    --vl-text-lifted: "";
-    --vl-text-accented: "";
-    --vl-text-muted: "";
-    --vl-text-inverted: "";
-    --vl-border: "";
-    --vl-border-lifted: "";
-    --vl-border-accented: "";
-    --vl-border-muted: "";
-    --vl-bg: "";
-    --vl-bg-lifted: "";
-    --vl-bg-accented: "";
-    --vl-bg-muted: "";
-    --vl-bg-inverted: "";
-    --vl-outline-sm: "";
-    --vl-outline-md: "";
-    --vl-outline-lg: "";
-}
-

package/ui.data-table/config.ts

@@ -16,7 +16,7 @@ export default /*tw*/ {
   stickyHeaderCell: "{>headerCellBase} flex-none whitespace-nowrap",
   stickyHeaderCheckbox: "{UCheckbox}",
   stickyHeaderCounter: {
-    base: "{>headerCounterBase} absolute top-4 left-11 bg-gradient-to-r from-white from-80%",
+    base: "{>headerCounterBase} absolute top-4 left-11 bg-gradient-to-r from-(--vl-bg) from-80%",
     variants: {
       compact: {
         true: "top-3",

package/ui.dropdown-link/storybook/stories.ts

@@ -170,7 +170,7 @@ export const Slots: StoryFn<DefaultUDropdownLinkArgs> = (args) => ({
 
       <UDropdownLink v-bind="args">
         <template #default>
-          <UBadge label="Dropdown" color="success" variant="ghost" />
+          <UBadge label="Dropdown" color="success" variant="soft" />
         </template>
       </UDropdownLink>
     </URow>

package/ui.form-calendar/UCalendarDayView.vue

@@ -356,7 +356,7 @@ const {
           v-else-if="getDayState(day).isAnotherMonthDayInRange"
           tabindex="-1"
           variant="ghost"
-          color="blue"
+          color="info"
           size="md"
           square
           v-bind="anotherMonthDayInRangeAttrs"

package/ui.form-calendar/config.ts

@@ -69,7 +69,7 @@ export default /*tw*/ {
     hover:focus-within:border-primary focus-within:border-primary
     focus-within:outline focus-within:outline-small focus-within:outline-primary
   `,
-  timepickerInput: "w-10 border-none px-1.5 py-1.5 text-center text-medium focus:ring-0 focus:outline-none",
+  timepickerInput: "w-10 border-none px-1.5 py-1.5 text-center text-medium focus:ring-0 focus:outline-none bg-default",
   timepickerInputHours: "{>timepickerInput} rounded-l-medium",
   timepickerInputMinutes: "{>timepickerInput}",
   timepickerInputSeconds: "{>timepickerInput} rounded-r-medium",

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

@@ -99,7 +99,7 @@ const {
         internal
         :size="size"
         :name="config.defaults.removeIcon"
-        :color="isRemoveButtonDisabled ? 'gray' : 'grayscale'"
+        :color="isRemoveButtonDisabled ? 'neutral' : 'grayscale'"
         v-bind="removeIconAttrs"
       />
     </UButton>
@@ -122,7 +122,7 @@ const {
         internal
         :size="size"
         :name="config.defaults.addIcon"
-        :color="isAddButtonDisabled ? 'gray' : 'grayscale'"
+        :color="isAddButtonDisabled ? 'neutral' : 'grayscale'"
         v-bind="addIconAttrs"
       />
     </UButton>

package/ui.form-radio-group/storybook/stories.ts

@@ -147,7 +147,7 @@ SlotLabel.args = {
   name: "SlotLabel",
   slotTemplate: `
     <template #label="{ label }">
-      <UBadge :label="label" color="success" variant="ghost" />
+      <UBadge :label="label" color="success" variant="soft" />
     </template>
   `,
 };

package/ui.form-select/storybook/stories.ts

@@ -424,7 +424,7 @@ export const SlotBeforeOption = DefaultTemplate.bind({});
 SlotBeforeOption.args = {
   slotTemplate: `
     <template #before-option="{ option, index }">
-      <UBadge v-if="index === 3" label="Special offer!" color="blue" class="mr-1" />
+      <UBadge v-if="index === 3" label="Special offer!" color="info" class="mr-1" />
     </template>
   `,
 };
@@ -442,7 +442,7 @@ export const SlotAfterOption = DefaultTemplate.bind({});
 SlotAfterOption.args = {
   slotTemplate: `
     <template #after-option="{ option, index }">
-      <UBadge v-if="index === 2" label="Special offer!" color="blue" class="ml-1" />
+      <UBadge v-if="index === 2" label="Special offer!" color="info" class="ml-1" />
     </template>
   `,
 };

package/ui.form-switch/config.ts

@@ -58,7 +58,7 @@ export default /*tw*/ {
     },
   },
   toggleLabel: {
-    base: "absolute text-center text-xsmall font-medium uppercase text-white",
+    base: "absolute text-center text-xsmall font-medium uppercase text-inverted",
     compoundVariants: [
       { toggleLabel: true, checked: true, class: "w-1/2 left-1" },
       { toggleLabel: true, checked: false, class: "w-1/2 right-1" },

package/ui.loader-overlay/ULoaderOverlay.vue

@@ -46,7 +46,7 @@ const { getDataTest, config, overlayAttrs, nestedLoaderAttrs } = useUI<Config>(d
     <div v-if="showLoader" v-bind="overlayAttrs" :data-test="getDataTest()">
       <!-- @slot Use it to add something instead of the default loader. -->
       <slot>
-        <ULoader :loading="showLoader" size="lg" color="inherit" v-bind="nestedLoaderAttrs" />
+        <ULoader :loading="showLoader" size="lg" :color="color" v-bind="nestedLoaderAttrs" />
       </slot>
     </div>
   </Transition>

package/ui.loader-overlay/config.ts

@@ -5,17 +5,12 @@ export default /*tw*/ {
   },
   overlay: {
     base: `
-      bg-{color} text-inverted
+      bg-default
       h-screen w-screen
       flex justify-center items-center
       fixed left-0 top-0 z-[9999]
       transition duration-300
     `,
-    variants: {
-      color: {
-        grayscale: "bg-lifted text-default",
-      },
-    },
   },
   nestedLoader: "{ULoader}",
   defaults: {

package/ui.navigation-progress/config.ts

@@ -57,7 +57,7 @@ export default /*tw*/ {
   stepperSvg: "",
   stepperGradient: "",
   stepperCircle: "stroke-{color}/10 text-{color}/10",
-  stepperCount: "text-medium font-bold translate-y-2 transform",
+  stepperCount: "text-medium fill-(--vl-text) font-bold translate-y-2 transform",
   header: {
     base: "{UHeader}",
     defaults: {

package/ui.other-dot/storybook/stories.ts

@@ -62,7 +62,7 @@ const EnumVariantTemplate: StoryFn<UDotArgs> = (args: UDotArgs, { argTypes }) =>
         align="center"
       >
         <UDot v-bind="args" :[args.enum]="option"/>
-        <UBadge :label="option" :[args.enum]="option" variant="ghost" size="md"/>
+        <UBadge :label="option" :[args.enum]="option" variant="subtle" size="md"/>
       </URow>
     </UCol>
   `,

package/ui.text-alert/storybook/stories.ts

@@ -154,7 +154,7 @@ export const Slots: StoryFn<UAlertArgs> = (args) => ({
             <UBadge
               label="We are trying to reconnect. Please wait a moment or check your network settings."
               color="error"
-              variant="ghost"
+              variant="soft"
             />
           </template>
         </UAlert>
@@ -169,13 +169,13 @@ export const Slots: StoryFn<UAlertArgs> = (args) => ({
 
         <UAlert v-bind="args">
           <template #bottom>
-            <UIcon name="sync" color="blue" />
+            <UIcon name="sync" color="info" />
           </template>
         </UAlert>
 
         <UAlert v-bind="args">
           <template #left>
-            <UIcon name="warning" color="yellow" />
+            <UIcon name="warning" color="warning" />
           </template>
         </UAlert>
 

package/ui.text-badge/storybook/stories.ts

@@ -160,7 +160,6 @@ export const Slots: StoryFn<UBadgeArgs> = (args) => ({
           <UMoney
             value="20.25"
             size="sm"
-            color="inherit"
             symbol="$"
           />
           <UIcon

package/ui.text-empty/storybook/stories.ts

@@ -86,7 +86,7 @@ SlotHeader.args = {
     <template #header>
       <UIcon
         name="person"
-        color="blue"
+        color="info"
         size="2xl"
       />
     </template>