vueless 0.0.825-beta.76 → 0.0.825-beta.78

package/assets/icons/app/keyboard_double_arrow_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M452.04-235.26 206.3-481l245.74-245.74L499.78-679 301.54-481l198.24 198-47.74 47.74Zm255.16 0L461.46-481 707.2-726.74 754.93-679l-198 198 198 198-47.73 47.74Z"/></svg>

package/assets/icons/app/keyboard_double_arrow_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m404.3-481-198-198 47.74-47.74L499.78-481 254.04-235.26 206.3-283l198-198Zm255.16 0-198-198 47.74-47.74L754.93-481 509.2-235.26 461.46-283l198-198Z"/></svg>

package/package.json

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

package/ui.form-calendar/UCalendar.vue

@@ -522,6 +522,12 @@ function onClickNextButton() {
   if (isCurrentView.value.year) addActiveYear(YEARS_PER_VIEW);
 }
 
+function onClickNextYearButton() {
+  activeDate.value = null;
+
+  addActiveYear(1);
+}
+
 function onClickPrevButton() {
   activeDate.value = null;
 
@@ -530,6 +536,12 @@ function onClickPrevButton() {
   if (isCurrentView.value.year) addActiveYear(YEARS_PER_VIEW * -1);
 }
 
+function onClickPrevYearButton() {
+  activeDate.value = null;
+
+  addActiveYear(-1);
+}
+
 function enterKeyHandler() {
   if (activeDate.value !== null && isCurrentView.value.day) {
     localValue.value = activeDate.value;
@@ -739,6 +751,18 @@ const {
 <template>
   <div ref="wrapper" :tabindex="tabindex" v-bind="wrapperAttrs" @keydown="onKeydown">
     <div v-bind="navigationAttrs">
+      <UButton
+        v-if="range"
+        square
+        size="sm"
+        color="grayscale"
+        variant="ghost"
+        :icon="config.defaults.prevYearIcon"
+        v-bind="nextPrevButtonAttrs"
+        @mousedown.prevent.capture
+        @click="onClickPrevYearButton"
+      />
+
       <UButton
         square
         size="sm"
@@ -749,6 +773,7 @@ const {
         @mousedown.prevent.capture
         @click="onClickPrevButton"
       />
+
       <UButton
         size="sm"
         color="grayscale"
@@ -769,6 +794,18 @@ const {
         @mousedown.prevent.capture
         @click="onClickNextButton"
       />
+
+      <UButton
+        v-if="range"
+        square
+        size="sm"
+        color="grayscale"
+        variant="ghost"
+        :icon="config.defaults.nextYearIcon"
+        v-bind="nextPrevButtonAttrs"
+        @mousedown.prevent.capture
+        @click="onClickNextYearButton"
+      />
     </div>
 
     <DayView

package/ui.form-calendar/config.ts

@@ -155,6 +155,8 @@ export default /*tw*/ {
     timepicker: false,
     /* icons */
     viewSwitchIcon: "keyboard_arrow_down",
+    nextYearIcon: "keyboard_double_arrow_right",
+    prevYearIcon: "keyboard_double_arrow_left",
     nextIcon: "keyboard_arrow_right",
     prevIcon: "keyboard_arrow_left",
   },

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

@@ -258,6 +258,14 @@ function onClickRemoveItem(id: string | number) {
   }
 }
 
+defineExpose({
+  /**
+   * An error.
+   * @property {boolean}
+   */
+  error: currentError,
+});
+
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -267,14 +275,6 @@ const mutatedProps = computed(() => ({
   label: Boolean(props.label),
 }));
 
-defineExpose({
-  /**
-   * An error.
-   * @property {boolean}
-   */
-  error: currentError,
-});
-
 const {
   getDataTest,
   config,

package/ui.text-file/UFile.vue

@@ -61,6 +61,10 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
+const mutatedProps = computed(() => ({
+  imageUrl: Boolean(props.imageUrl),
+}));
+
 const {
   getDataTest,
   config,
@@ -70,7 +74,7 @@ const {
   fileLabelAttrs,
   fileImageAttrs,
   removeIconAttrs,
-} = useUI<Config>(defaultConfig);
+} = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>

package/ui.text-file/config.ts

@@ -9,19 +9,10 @@ export default /*tw*/ {
       },
     },
   },
-  body: {
-    base: "flex items-center",
-    variants: {
-      size: {
-        sm: "gap-1",
-        md: "gap-1.5",
-        lg: "gap-2",
-      },
-    },
-  },
+  body: "flex items-center gap-2",
   fileImage: "rounded-sm max-w-7",
   fileIcon: {
-    base: "{UIcon}",
+    base: "{UIcon} -mr-1",
     defaults: {
       size: {
         sm: "xs",
@@ -30,7 +21,7 @@ export default /*tw*/ {
       },
     },
   },
-  fileLabel: "{ULink}",
+  fileLabel: "{ULink} break-all !leading-[1.5]",
   removeIcon: {
     base: "{UIcon}",
     defaults: {