vueless 0.0.302 → 0.0.304

package/package.json

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

package/ui.form-calendar/composables/attrs.composable.js

@@ -29,9 +29,8 @@ export default function useAttrs(props) {
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    if (
-      ["timepickerInputHours", "timepickerInputMinutes", "timepickerInputSeconds"].includes(key)
-    ) {
+    // eslint-disable-next-line prettier/prettier
+    if (["timepickerInputHours", "timepickerInputMinutes", "timepickerInputSeconds"].includes(key)) {
       const keyAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => ({
@@ -42,22 +41,8 @@ export default function useAttrs(props) {
 
     // TODO: Need to find other solution
     // classes is not reactive here, which may cause problems in styling by `config` prop
-    if (key === "day") {
-      attrs[`${key}Attrs`] = (classes) => {
-        return getAttrs("day", { classes }).value;
-      };
-    }
-
-    if (key === "month") {
-      attrs[`${key}Attrs`] = (classes) => {
-        return getAttrs("month", { classes }).value;
-      };
-    }
-
-    if (key === "year") {
-      attrs[`${key}Attrs`] = (classes) => {
-        return getAttrs("year", { classes }).value;
-      };
+    if (key === "day" || key === "month" || key === "year") {
+      attrs[`${key}Attrs`] = (classes) => getAttrs(key, { classes }).value;
     }
   }
 

package/ui.form-calendar/configs/default.config.js

@@ -1,10 +1,7 @@
 export default /*tw*/ {
   wrapper: "p-3 pb-4 w-64 border border-gray-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
   navigation: "mb-2 pb-2 border-b flex items-center justify-between",
-  navigationSwitchViewButton: "{UButton} -ml-3 pl-3 text-sm rounded-l-none",
-  dayViewSwitchLabel: "flex gap-1",
-  dayViewSwitchLabelMonth: "",
-  dayViewSwitchLabelIcon: "",
+  viewSwitchButton: "{UButton} -ml-3 pl-3 text-sm rounded-l-none",
   nextPrevWrapper: {
     base: "flex",
     variants: {
@@ -122,7 +119,7 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaults: {
-    dayViewSwitchLabelIcon: "keyboard_arrow_right",
+    viewSwitchIcon: "keyboard_arrow_down",
     nextIcon: "keyboard_arrow_right",
     prevIcon: "keyboard_arrow_left",
     userFormat: "j F, Y",

package/ui.form-calendar/index.vue

@@ -11,17 +11,16 @@
           no-ring
           size="sm"
           variant="thirdary"
-          :right-icon="config.defaults.dayViewSwitchLabelIcon"
-          v-bind="navigationSwitchViewButtonAttrs"
+          :right-icon="isCurrentView.day && config.defaults.viewSwitchIcon"
+          v-bind="viewSwitchButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickViewSwitch"
         >
-          <span v-if="isCurrentView.day" v-bind="dayViewSwitchLabelAttrs">
-            <span v-bind="dayViewSwitchLabelMonthAttrs" v-text="viewSwitchLabel.month" />
-            <span v-text="viewSwitchLabel.year" />
-          </span>
-          <span v-if="isCurrentView.month" v-text="viewSwitchLabel.year" />
-          <span v-if="isCurrentView.year" v-text="viewSwitchLabel.yearsRange" />
+          <template v-if="isCurrentView.day">
+            {{ viewSwitchLabel.month }} {{ viewSwitchLabel.year }}
+          </template>
+          <template v-if="isCurrentView.month">{{ viewSwitchLabel.year }}</template>
+          <template v-if="isCurrentView.year">{{ viewSwitchLabel.yearsRange }}</template>
         </UButton>
       </Teleport>
 
@@ -321,9 +320,7 @@ const {
   config,
   wrapperAttrs,
   navigationAttrs,
-  navigationSwitchViewButtonAttrs,
-  dayViewSwitchLabelAttrs,
-  dayViewSwitchLabelMonthAttrs,
+  viewSwitchButtonAttrs,
   nextPrevButtonAttrs,
   timepickerAttrs,
   timepickerLabelAttrs,

package/ui.form-date-picker-range/configs/default.config.js

@@ -64,7 +64,10 @@ export default /*tw*/ {
     component: "{UCalendar}",
     wrapper: "p-0 mt-2 w-full border-none shadow-none",
     navigation: "mb-0 border-none",
-    navigationSwitchViewButton: "rounded-dynamic px-3",
+    viewSwitchButton: {
+      base: "rounded-dynamic px-4",
+      rightIcon: "hidden",
+    },
     day: "w-full h-10 mb-0.5",
   },
   i18n: {

package/ui.loader/index.vue

@@ -1,11 +1,14 @@
 <template>
   <Transition v-bind="config.transition">
     <div v-if="loading" v-bind="loaderAttrs">
-      <div
-        v-for="ellipse in ELLIPSES_AMOUNT"
-        :key="ellipse"
-        v-bind="ellipseAttrs(ellipseClasses)"
-      />
+      <!-- @slot Use it to add something instead of the default loader. -->
+      <slot>
+        <div
+          v-for="ellipse in ELLIPSES_AMOUNT"
+          :key="ellipse"
+          v-bind="ellipseAttrs(ellipseClasses)"
+        />
+      </slot>
     </div>
   </Transition>
 </template>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.302",
+  "version": "0.0.304",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5703,6 +5703,12 @@
               "default": "md"
             }
           ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Use it to add something instead of the default loader."
+            }
+          ],
           "source": {
             "module": "./src/ui.loader/index.vue",
             "symbol": "default"