vueless 1.2.8-beta.6 → 1.2.8-beta.8

package/constants.d.ts

@@ -9,6 +9,8 @@ export const OUTLINE: "outline";
 export const ROUNDING: "rounding";
 export const DISABLED_OPACITY: "disabled-opacity";
 export const LETTER_SPACING: "letter-spacing";
+export const LIGHT_THEME: "light-theme";
+export const DARK_THEME: "dark-theme";
 export const COLOR_MODE_KEY: "vl-color-mode";
 export const AUTO_MODE_KEY: "vl-auto-mode";
 export const DARK_MODE_CLASS: "vl-dark";
@@ -28,6 +30,7 @@ export const DEFAULT_DISABLED_OPACITY: 50;
 export const DEFAULT_LETTER_SPACING: 0;
 export const PRIMARY_COLORS: string[];
 export const STATE_COLORS: string[];
+export const LAYOUT_COLORS: string[];
 export const NEUTRAL_COLORS: string[];
 export const COLOR_SHADES: number[];
 export const DEFAULT_LIGHT_THEME: {

package/constants.js

@@ -17,6 +17,8 @@ export const OUTLINE = "outline";
 export const ROUNDING = "rounding";
 export const DISABLED_OPACITY = "disabled-opacity";
 export const LETTER_SPACING = "letter-spacing";
+export const LIGHT_THEME = "light-theme";
+export const DARK_THEME = "dark-theme";
 
 /* Vueless color mode keys */
 export const COLOR_MODE_KEY = "vl-color-mode";
@@ -70,6 +72,7 @@ export const STATE_COLORS = [
   NEUTRAL_COLOR,
   GRAYSCALE_COLOR,
 ];
+export const LAYOUT_COLORS = ["text", "border", "bg"];
 export const NEUTRAL_COLORS = ["slate", "gray", "zinc", "neutral", "stone"];
 export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.8-beta.6",
+  "version": "1.2.8-beta.8",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

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

@@ -104,7 +104,7 @@ watch(
 );
 
 onMounted(() => {
-  if (localValue.value !== undefined && localValue.value !== null && localValue.value !== "") {
+  if (localValue.value || localValue.value === 0) {
     setValue(stringLocalValue.value);
   }
 });

package/ui.form-listbox/UListbox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, computed, useId, ref, useTemplateRef, nextTick, useAttrs } from "vue";
+import { watch, computed, useId, ref, useTemplateRef, nextTick } from "vue";
 import { isEqual } from "lodash-es";
 
 import useUI from "../composables/useUI";
@@ -65,8 +65,6 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-const attrs = useAttrs();
-
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const listboxInputRef = useTemplateRef<{ input: HTMLInputElement }>("listbox-input");
 const optionsRef = useTemplateRef<HTMLLIElement[]>("option");
@@ -75,7 +73,7 @@ const addOptionRef = useTemplateRef<HTMLLIElement>("add-option");
 
 const wrapperMaxHeight = ref("");
 
-const internalSearch = ref<string>(props.search ?? "");
+const localSearch = ref(props.search ?? "");
 
 const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
   usePointer(props.options, optionsRef, wrapperRef);
@@ -88,13 +86,12 @@ const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>
   props?.config?.i18n,
 );
 
-const isControlledSearch = computed(() => "onUpdate:search" in attrs);
-
-const search = computed({
-  get: () => (isControlledSearch.value ? (props.search ?? "") : internalSearch.value),
+const searchModel = computed({
+  get: () => localSearch.value,
   set: (value: string) => {
     emit("update:search", value);
-    if (!isControlledSearch.value) internalSearch.value = value;
+
+    localSearch.value = value ?? "";
   },
 });
 
@@ -107,7 +104,7 @@ const selectedValue = computed({
     return props.modelValue;
   },
   set: (value) => {
-    if (search.value) search.value = "";
+    if (searchModel.value) searchModel.value = "";
 
     emit("update:modelValue", value);
   },
@@ -118,7 +115,7 @@ const addOptionKeyCombination = computed(() => {
 });
 
 const filteredOptions = computed(() => {
-  const normalizedSearch = search.value.toLowerCase().trim();
+  const normalizedSearch = searchModel.value.toLowerCase().trim();
 
   let options = [...props.options];
 
@@ -136,14 +133,7 @@ const filteredOptions = computed(() => {
 });
 
 watch(
-  () => props.search,
-  (value) => {
-    if (isControlledSearch.value) internalSearch.value = value ?? "";
-  },
-);
-
-watch(
-  () => [props.options, props.size, props.visibleOptions, props.searchable, search.value],
+  () => [props.options, props.size, props.visibleOptions, props.searchable, searchModel.value],
   () => {
     nextTick(() => {
       const options = [
@@ -444,7 +434,7 @@ const {
       v-if="searchable"
       :id="elementId"
       ref="listbox-input"
-      v-model="search"
+      v-model="searchModel"
       :placeholder="localeMessages.search"
       :size="size"
       :debounce="debounce"

package/utils/theme.ts

@@ -35,6 +35,8 @@ import {
   DEFAULT_DISABLED_OPACITY,
   LETTER_SPACING,
   DEFAULT_LETTER_SPACING,
+  LIGHT_THEME,
+  DARK_THEME,
 } from "../constants";
 
 import type {
@@ -191,6 +193,8 @@ export function resetTheme() {
     `vl-${ROUNDING}-lg`,
     `vl-${LETTER_SPACING}`,
     `vl-${DISABLED_OPACITY}`,
+    `vl-${LIGHT_THEME}`,
+    `vl-${DARK_THEME}`,
   ];
 
   themeKeys.forEach((key) => {
@@ -217,8 +221,8 @@ export function getTheme(config?: ThemeConfig): MergedThemeConfig {
   const letterSpacing = getLetterSpacing(config?.letterSpacing);
   const disabledOpacity = getDisabledOpacity(config?.disabledOpacity);
 
-  const lightTheme = merge({}, DEFAULT_LIGHT_THEME, vuelessConfig.lightTheme);
-  const darkTheme = merge({}, DEFAULT_DARK_THEME, vuelessConfig.darkTheme);
+  const lightTheme = getLightTheme(config?.lightTheme);
+  const darkTheme = getDarkTheme(config?.darkTheme);
 
   return {
     colorMode,
@@ -254,8 +258,8 @@ export function setTheme(config: ThemeConfig = {}) {
   let primary = getPrimaryColor(config.primary);
   const neutral = getNeutralColor(config.neutral);
 
-  const lightTheme = merge({}, DEFAULT_LIGHT_THEME, vuelessConfig.lightTheme, config.lightTheme);
-  const darkTheme = merge({}, DEFAULT_DARK_THEME, vuelessConfig.darkTheme, config.darkTheme);
+  const lightTheme = getLightTheme(config.lightTheme);
+  const darkTheme = getDarkTheme(config.darkTheme);
 
   /* Redeclare primary color if grayscale color set as default */
   if (primary === GRAYSCALE_COLOR) {
@@ -636,6 +640,58 @@ function getDisabledOpacity(disabledOpacity?: ThemeConfig["disabledOpacity"]) {
   return mergedOpacity;
 }
 
+/**
+ * Retrieve light theme configuration and save them to cookie and localStorage.
+ * @return Partial<VuelessCssVariables> - light theme configuration.
+ */
+function getLightTheme(lightTheme?: Partial<VuelessCssVariables>) {
+  const storageKey = `vl-${LIGHT_THEME}`;
+
+  const storedLightTheme: Partial<VuelessCssVariables> = JSON.parse(getStored(storageKey) ?? "{}");
+
+  const mergedLightTheme = merge(
+    {},
+    DEFAULT_LIGHT_THEME,
+    vuelessConfig.lightTheme,
+    storedLightTheme,
+    lightTheme,
+  );
+
+  if (isCSR && lightTheme !== undefined) {
+    const themeString = JSON.stringify(mergedLightTheme);
+
+    localStorage.setItem(storageKey, themeString);
+  }
+
+  return mergedLightTheme;
+}
+
+/**
+ * Retrieve dark theme configuration and save them to cookie and localStorage.
+ * @return Partial<VuelessCssVariables> - dark theme configuration.
+ */
+function getDarkTheme(darkTheme?: Partial<VuelessCssVariables>) {
+  const storageKey = `vl-${DARK_THEME}`;
+
+  const storedDarkTheme: Partial<VuelessCssVariables> = JSON.parse(getStored(storageKey) ?? "{}");
+
+  const mergedDarkTheme = merge(
+    {},
+    DEFAULT_DARK_THEME,
+    vuelessConfig.darkTheme,
+    storedDarkTheme,
+    darkTheme,
+  );
+
+  if (isCSR && darkTheme !== undefined) {
+    const themeString = JSON.stringify(mergedDarkTheme);
+
+    localStorage.setItem(storageKey, themeString);
+  }
+
+  return mergedDarkTheme;
+}
+
 /**
  * Generate and apply Vueless CSS variables.
  * @return string - Vueless CSS variables string.