vueless 0.0.92 → 0.0.94

package/package.json

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

package/service.ui/index.js

@@ -44,11 +44,16 @@ export default class UIServiceDefault {
   HYPHEN_SYMBOL = "-";
 
   constructor() {
-    this.isMac = this.checkIsMac();
+    // Needed to avoid error in server context for ssr
+    // TODO: Find way call it in browser
+    // Possible solution: https://github.com/nuxt/nuxt/discussions/7878
+    const isBrowser = typeof window !== "undefined";
 
-    this.isPWA = this.checkIsPWA();
-    this.isIOS = this.checkIsIOS();
-    this.isAndroid = this.checkIsAndroid();
+    this.isMac = isBrowser && this.checkIsMac();
+
+    this.isPWA = isBrowser && this.checkIsPWA();
+    this.isIOS = isBrowser && this.checkIsIOS();
+    this.isAndroid = isBrowser && this.checkIsAndroid();
 
     this.isMobileApp = this.isPWA || this.isIOS || this.isAndroid;
   }

package/ui.data-list/index.vue

@@ -76,9 +76,9 @@
             :group="group"
             :data-cy="`${dataCy}-table`"
             v-bind="nestedAttrs"
-            @clickDelete="onClickDelete"
-            @clickEdit="onClickEdit"
-            @dragSort="onDragEnd"
+            @click-delete="onClickDelete"
+            @click-edit="onClickEdit"
+            @drag-sort="onDragEnd"
           >
             <template #default="{ item }">
               <slot :item="item">

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  label: "w-auto max-w-max relative gap-0",
+  label: "w-auto max-w-max relative gap-3",
   partialIconName: "remove",
   selectedIconName: "check",
   iconWrapper: {

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  input: "",
+  input: "relative",
   inputActive: {
     block: {
       base: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",

package/ui.form-date-picker/index.vue

@@ -41,8 +41,8 @@
         :min-date="minDate"
         v-bind="calendarAttrs"
         @keydown.esc="deactivate"
-        @userDateChange="onUserFormatDateChange"
-        @formattedDateChange="onFormattedDateChange"
+        @user-date-change="onUserFormatDateChange"
+        @formatted-date-change="onFormattedDateChange"
         @input="onInput"
         @blur="onBlur"
         @submit="onSubmit"

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "",
+  wrapper: "relative",
   input: "",
   inputActive: {
     block: {
@@ -55,9 +55,9 @@ export default /*tw*/ {
   periodDateActive: "bg-zinc-100",
   rangeInputWrapper: "flex mt-4",
   rangeInput: {
-    wrapper: "ml-0 group/range-input-wrapper",
     block: `focus-within:z-10 group-first/range-input-wrapper:rounded-r-none group-last/range-input-wrapper:rounded-l-none`,
     label: {
+      wrapper: "group/range-input-wrapper",
       description: "hidden",
     },
     input: {

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

@@ -92,8 +92,6 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
   const innerWrapperAttrs = getAttrs("innerWrapper", { classes: innerWrapperClasses });
   const wrapperTopAttrs = getAttrs("wrapperTop");
   const leftSlotAttrs = getAttrs("leftSlot");
-  const beforeCaretSlotAttrs = getAttrs("beforeCaretSlot");
-  const afterCaretSlotAttrs = getAttrs("afterCaretSlot");
   const iconToggleAttrs = getAttrs("iconToggle", { isComponent: true });
   const searchInputAttrs = getAttrs("searchInput", { classes: searchInputClasses });
   const selectedLabelsAttrs = getAttrs("selectedLabels");
@@ -136,6 +134,20 @@ export default function useAttrs(props, { isTop, isOpen, selectedLabel: selected
     class: cx([caretClearAttrsRaw.value.class, caretClasses.value]),
   }));
 
+  const beforeCaretSlotAttrsRaw = getAttrs("beforeCaretSlot");
+
+  const beforeCaretSlotAttrs = computed(() => ({
+    ...beforeCaretSlotAttrsRaw.value,
+    class: cx([beforeCaretSlotAttrsRaw.value.class, caretClasses.value]),
+  }));
+
+  const afterCaretSlotAttrsRaw = getAttrs("afterCaretSlot");
+
+  const afterCaretSlotAttrs = computed(() => ({
+    ...afterCaretSlotAttrsRaw.value,
+    class: cx([afterCaretSlotAttrsRaw.value.class, caretClasses.value]),
+  }));
+
   const searchAttrsRaw = getAttrs("search");
 
   const searchAttrs = computed(() => ({

package/ui.form-select/index.vue

@@ -68,7 +68,7 @@
       </div>
 
       <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">
-        <div v-if="multiple" v-bind="selectedLabelsAttrs">
+        <div v-if="multiple && localValue.length" v-bind="selectedLabelsAttrs">
           <span v-for="item in localValue" :key="item[valueKey]" v-bind="selectedLabelAttrs">
             <!-- @slot Use it to add selected value label. -->
             <slot
@@ -173,7 +173,7 @@
         tabindex="-1"
         v-bind="dropdownListAttrs"
         @focus="activate"
-        @addOption="onAddOption"
+        @add-option="onAddOption"
         @mousedown.prevent.capture
         @click.prevent.capture
       >

package/ui.loader-top/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Transition :css="false" @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
+  <Transition :css="false" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
     <div v-if="show" v-bind="progressAttrs" :style="barStyle" />
   </Transition>
 </template>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.92",
+  "version": "0.0.94",
   "contributions": {
     "html": {
       "description-markup": "markdown",