vueless 0.0.93 → 0.0.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.93",
+  "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.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-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

package/web-types.json

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