vueless 0.0.79 → 0.0.80

package/package.json

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

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

@@ -65,6 +65,7 @@ export default /*tw*/ {
     color: "brand",
     type: "link",
     size: "md",
+    ariaCurrentValue: "page",
     activeClass: "",
     exactActiveClass: "",
     wrapperActiveClass: "",
@@ -75,6 +76,8 @@ export default /*tw*/ {
     dashed: false,
     disabled: false,
     targetBlank: false,
+    custom: false,
+    replace: false,
   },
   safelist: (colors) => [
     { pattern: `decoration-(${colors})-500` },

package/ui.button-link/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-bind="wrapperAttrs" ref="wrapperRef" tabindex="-1">
-    <div v-if="hasSlotContent(slots['left'])" v-bind="leftSlotAttrs">
+    <div v-if="hasSlotContent($slots['left'])" v-bind="leftSlotAttrs">
       <!-- @slot Use it to add something before text. -->
       <slot name="left" />
     </div>
@@ -19,7 +19,7 @@
     >
       <!-- @slot Use it replace the text. -->
       <slot>
-        <span v-if="!hasSlotContent(slots['default'])" v-bind="textAttrs" v-text="label" />
+        <span v-if="!hasSlotContent($slots['default'])" v-bind="textAttrs" v-text="label" />
       </slot>
     </router-link>
 
@@ -37,11 +37,11 @@
     >
       <!-- @slot Use it replace the text. -->
       <slot>
-        <span v-if="!hasSlotContent(slots['default'])" v-bind="textAttrs" v-text="label" />
+        <span v-if="!hasSlotContent($slots['default'])" v-bind="textAttrs" v-text="label" />
       </slot>
     </a>
 
-    <div v-if="hasSlotContent(slots['right'])" v-bind="rightSlotAttrs">
+    <div v-if="hasSlotContent($slots['right'])" v-bind="rightSlotAttrs">
       <!-- @slot Use it to add something after text. -->
       <slot name="right" />
     </div>
@@ -49,7 +49,7 @@
 </template>
 
 <script setup>
-import { computed, useSlots, ref } from "vue";
+import { computed, ref } from "vue";
 import { RouterLink, useLink } from "vue-router";
 import UIService from "../service.ui";
 
@@ -122,6 +122,30 @@ const props = defineProps({
     default: UIService.get(defaultConfig, ULink).default.targetBlank,
   },
 
+  /**
+   * Pass value to the attribute aria-current when the link is exact active.
+   */
+  ariaCurrentValue: {
+    type: String,
+    default: UIService.get(defaultConfig, ULink).default.ariaCurrentValue,
+  },
+
+  /**
+   * Whether RouterLink should not wrap its content in an a tag.
+   */
+  custom: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.custom,
+  },
+
+  /**
+   * Whether RouterLink should not wrap its content in an a tag.
+   */
+  replace: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, ULink).default.replace,
+  },
+
   /**
    * Apply classes to the link when its route is active or when it matches any parent route.
    */
@@ -211,8 +235,20 @@ const props = defineProps({
   },
 });
 
-const slots = useSlots();
-const { route, isActive, isExactActive } = useLink({ to: props.route });
+const isPresentRoute = computed(() => {
+  for (let key in props.route) return true;
+
+  return false;
+});
+
+const { route, isActive, isExactActive } = useLink({
+  activeClass: props.activeClass,
+  ariaCurrentValue: props.ariaCurrentValue,
+  exactActiveClass: props.exactActiveClass,
+  custom: props.custom,
+  replace: props.replace,
+  to: isPresentRoute.value ? props.route : "/",
+});
 
 const wrapperRef = ref(null);
 
@@ -235,12 +271,6 @@ const href = computed(() => {
   return `${types[props.type]}${props.url}`;
 });
 
-const isPresentRoute = computed(() => {
-  for (let key in props.route) return true;
-
-  return false;
-});
-
 function onClick(event) {
   !props.url || props.disabled ? emit("click", event) : window.open(href.value, props.targetValue);
 }

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

@@ -1,6 +1,6 @@
 <template>
   <div v-bind="wrapperAttrs">
-    <div v-if="!hasSlotContent(slots['default'])">
+    <div v-if="!hasSlotContent($slots['default'])">
       <ULabel
         :label="props.label"
         :description="props.description"
@@ -65,7 +65,7 @@ import Uppy from "@uppy/core";
 import DragDrop from "@uppy/vue/src/drag-drop";
 import { merge } from "lodash-es";
 
-import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon";
 import ULabel from "../ui.form-label";
@@ -191,8 +191,6 @@ const props = defineProps({
   },
 });
 
-const slots = useSlots();
-
 const emit = defineEmits(["changeFiles", "deleteFile"]);
 
 const { tm } = useLocale();

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

@@ -26,7 +26,7 @@
       <slot name="right" />
 
       <UButton
-        v-if="searchButton && !hasSlotContent(slots['right'])"
+        v-if="searchButton && !hasSlotContent($slots['right'])"
         :label="text"
         v-bind="buttonAttrs"
         :data-cy="`${dataCy}-right`"
@@ -62,7 +62,7 @@
 </template>
 
 <script setup>
-import { computed, useSlots } from "vue";
+import { computed } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UInput from "../ui.form-input";
@@ -184,7 +184,6 @@ const props = defineProps({
   },
 });
 
-const slots = useSlots();
 const emit = defineEmits(["update:modelValue", "clear", "search"]);
 
 const { config, inputAttrs, searchIconAttrs, closeIconAttrs, buttonAttrs, hasSlotContent } =

package/ui.text-alert/index.vue

@@ -4,7 +4,7 @@
       <!-- @slot Use it to add something inside. -->
       <slot />
 
-      <div v-if="!hasSlotContent(slots['default'])" v-html="html" />
+      <div v-if="!hasSlotContent($slots['default'])" v-html="html" />
     </div>
 
     <UButton size="sm" variant="thirdary" :color="color" square v-bind="buttonAttrs">
@@ -23,7 +23,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, useSlots } from "vue";
+import { onMounted, ref } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
@@ -103,7 +103,6 @@ const props = defineProps({
   },
 });
 
-const slots = useSlots();
 const emit = defineEmits(["hidden"]);
 
 const isShownAlert = ref(true);

package/ui.text-block/index.vue

@@ -1,14 +1,12 @@
 <template>
   <div v-bind="wrapperAttrs" :data-cy="dataCy">
     <!-- @slot Use it to add something. -->
-    <div v-if="!hasSlotContent(slots['default'])" v-html="html" />
+    <div v-if="!hasSlotContent($slots['default'])" v-html="html" />
     <slot />
   </div>
 </template>
 
 <script setup>
-import { useSlots } from "vue";
-
 import UIService from "../service.ui";
 
 import { UText } from "./constatns";
@@ -70,7 +68,5 @@ const props = defineProps({
   },
 });
 
-const slots = useSlots();
-
 const { wrapperAttrs, hasSlotContent } = useAttrs(props);
 </script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4302,6 +4302,33 @@
               },
               "default": "false"
             },
+            {
+              "name": "ariaCurrentValue",
+              "description": "Pass value to the attribute aria-current when the link is exact active.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "page"
+            },
+            {
+              "name": "custom",
+              "description": "Whether RouterLink should not wrap its content in an a tag.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "replace",
+              "description": "Whether RouterLink should not wrap its content in an a tag.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "activeClass",
               "description": "Apply classes to the link when its route is active or when it matches any parent route.",