vueless 0.0.677 → 0.0.679

package/package.json

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

package/ui.button-link/ULink.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, useSlots } from "vue";
-import { RouterLink, useLink } from "vue-router";
+import { RouterLink } from "vue-router";
 
 import useUI from "../composables/useUI.ts";
 import { hasSlotContent } from "../utils/helper.ts";
@@ -53,31 +53,7 @@ const isPresentRoute = computed(() => {
 });
 
 const safeTo = computed(() => {
-  if (!props.to) {
-    return "/";
-  }
-
-  return props.to;
-});
-
-const useLinkOptions = {
-  activeClass: props.activeClass,
-  ariaCurrentValue: props.ariaCurrentValue,
-  exactActiveClass: props.exactActiveClass,
-  custom: props.custom,
-  replace: props.replace,
-  to: safeTo.value,
-};
-
-const { route, isActive, isExactActive } = useLink(useLinkOptions);
-
-const linkActiveClasses = computed(() => [
-  isActive.value && props.activeClass,
-  isExactActive.value && props.exactActiveClass,
-]);
-
-const targetValue = computed(() => {
-  return props.targetBlank ? "_blank" : "_self";
+  return props.to || "/";
 });
 
 const prefixedHref = computed(() => {
@@ -125,10 +101,15 @@ const { getDataTest, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 <template>
   <router-link
     v-if="isPresentRoute"
-    :to="route"
-    :target="targetValue"
+    :to="safeTo"
+    :custom="custom"
+    :replace="replace"
+    :target="target"
+    :active-class="activeClass"
+    :exact-active-class="exactActiveClass"
+    :aria-current-value="ariaCurrentValue"
+    :view-transition="viewTransition"
     v-bind="linkAttrs"
-    :class="linkActiveClasses"
     :data-test="getDataTest()"
     tabindex="0"
     @blur="onBlur"
@@ -143,10 +124,10 @@ const { getDataTest, linkAttrs } = useUI<Config>(defaultConfig, mutatedProps);
 
   <a
     v-else
+    :rel="rel"
     :href="prefixedHref"
-    :target="targetValue"
+    :target="target"
     v-bind="linkAttrs"
-    :class="linkActiveClasses"
     :data-test="getDataTest()"
     tabindex="0"
     @blur="onBlur"

package/ui.button-link/config.ts

@@ -55,16 +55,18 @@ export default /*tw*/ {
     color: "brand",
     type: "link",
     size: "md",
-    ariaCurrentValue: "page",
+    target: "_self",
     activeClass: "",
     exactActiveClass: "",
+    ariaCurrentValue: "page",
+    rel: "noopener noreferrer",
     underlined: undefined,
-    block: false,
     ring: false,
+    block: false,
     dashed: false,
-    disabled: false,
-    targetBlank: false,
     custom: false,
     replace: false,
+    disabled: false,
+    viewTransition: false,
   },
 };

package/ui.button-link/types.ts

@@ -12,14 +12,14 @@ export interface Props {
   label?: string;
 
   /**
-   * Link href url.
+   * Vue-router route object.
    */
-  href?: string;
+  to?: RouteLocationRaw;
 
   /**
-   * Vue-router route object.
+   * Link href url.
    */
-  to?: RouteLocationRaw;
+  href?: string;
 
   /**
    * Link size.
@@ -58,34 +58,29 @@ export interface Props {
   type?: "phone" | "email" | "link";
 
   /**
-   * Open link in the new tab.
-   */
-  targetBlank?: boolean;
-
-  /**
-   * Pass value to the attribute aria-current when the link is exact active.
+   * Apply classes to the link when its route is active or when it matches any parent route.
    */
-  ariaCurrentValue?: string;
+  activeClass?: string;
 
   /**
-   * Whether RouterLink should not wrap its content in a tag.
+   * Apply classes to the link when its route is active.
    */
-  custom?: boolean;
+  exactActiveClass?: string;
 
   /**
-   * Whether RouterLink should not wrap its content in a tag.
+   * Pass value to the attribute aria-current when the link is exact active.
    */
-  replace?: boolean;
+  ariaCurrentValue?: "time" | "location" | "page" | "step" | "date" | "true" | "false";
 
   /**
-   * Apply classes to the link when its route is active or when it matches any parent route.
+   * Specifies where to open the linked page.
    */
-  activeClass?: string;
+  target?: "_blank" | "_self" | "_parent" | "_top" | string;
 
   /**
-   * Apply classes to the link when its route is active.
+   * A rel attribute value to apply on the external link.
    */
-  exactActiveClass?: string;
+  rel?: string;
 
   /**
    * Show underline.
@@ -112,6 +107,21 @@ export interface Props {
    */
   ring?: boolean;
 
+  /**
+   * Whether RouterLink should not wrap its content in a tag.
+   */
+  custom?: boolean;
+
+  /**
+   * Calls `router.replace` instead of `router.push`.
+   */
+  replace?: boolean;
+
+  /**
+   * Pass the returned promise of `router.push()` to `document.startViewTransition()` if supported.
+   */
+  viewTransition?: boolean;
+
   /**
    * Component config object.
    */

package/ui.data-table/UTable.vue

@@ -141,7 +141,9 @@ const sortedRows: ComputedRef<Row[]> = computed(() => {
 
 const isFooterSticky = computed(() => {
   return (
-    window.innerHeight < tableHeight.value && props.stickyFooter && !isShownFooterPosition.value
+    Number(window?.innerHeight) < tableHeight.value &&
+    props.stickyFooter &&
+    !isShownFooterPosition.value
   );
 });
 
@@ -165,15 +167,15 @@ const isShownActionsHeader = computed(
 
 const isHeaderSticky = computed(() => {
   const positionForFixHeader =
-    Number(headerRowRef.value?.getBoundingClientRect()?.top) + window.scrollY || 0;
+    Number(headerRowRef.value?.getBoundingClientRect()?.top) + Number(window?.scrollY) || 0;
 
   return positionForFixHeader <= pagePositionY.value && props.stickyHeader;
 });
 
 const isShownFooterPosition = computed(() => {
-  const pageBottom = pagePositionY.value + window.innerHeight;
+  const pageBottom = pagePositionY.value + Number(window?.innerHeight);
   const positionForFixFooter =
-    Number(footerRowRef.value?.getBoundingClientRect()?.bottom) + window.scrollY;
+    Number(footerRowRef.value?.getBoundingClientRect()?.bottom) + Number(window?.scrollY);
 
   return pageBottom >= positionForFixFooter;
 });
@@ -310,7 +312,7 @@ function setHeaderCellWidth() {
 }
 
 function onScroll() {
-  pagePositionY.value = window.scrollY;
+  pagePositionY.value = Number(window?.scrollY);
 }
 
 function synchronizeTableItemsWithProps() {

package/ui.other-theme-color-toggle/types.ts

@@ -8,12 +8,12 @@ export interface Props {
   /**
    * Selected brand color (v-model).
    */
-  brand: BrandColors;
+  brand?: BrandColors;
 
   /**
    * Selected gray color (v-model).
    */
-  gray: GrayColors;
+  gray?: GrayColors;
 
   /**
    * Component size.

package/utils/theme.ts

@@ -100,11 +100,11 @@ export function setColorMode(colorMode: `${ColorMode}`) {
 }
 
 export function getSelectedBrandColor() {
-  return localStorage.getItem("brand") || undefined;
+  return (isCSR && localStorage.getItem("brand")) || undefined;
 }
 
 export function getSelectedGrayColor() {
-  return localStorage.getItem("gray") || undefined;
+  return (isCSR && localStorage.getItem("gray")) || undefined;
 }
 
 export function setTheme(config: Config = {}) {
@@ -138,8 +138,8 @@ export function setTheme(config: Config = {}) {
   const defaultGrayShade = isDarkMode ? 400 : 600;
   const defaultRingOffsetColor = isDarkMode ? ringOffsetColorDark : ringOffsetColorLight;
 
-  localStorage.setItem("brand", brand);
-  localStorage.setItem("gray", gray);
+  isCSR && localStorage.setItem("brand", brand);
+  isCSR && localStorage.setItem("gray", gray);
 
   if (gray === COOL_COLOR) {
     gray = GRAY_COLOR;