vueless 0.0.771 → 0.0.773

package/directives/tooltip/vTooltip.ts

@@ -1,7 +1,8 @@
+import tippy from "tippy.js";
 import { merge } from "lodash-es";
 
 import { vuelessConfig } from "../../utils/ui.ts";
-import { isSSR } from "../../utils/helper.ts";
+import { isCSR, isSSR } from "../../utils/helper.ts";
 
 import type { DefaultProps } from "tippy.js";
 import type {
@@ -12,13 +13,20 @@ import type {
 
 let settings: Partial<DefaultProps> = {};
 
-const defaultSettings = {
-  arrow: true,
-  theme: "light",
-  animation: "shift-away",
-};
+if (isCSR) {
+  import("tippy.js/dist/tippy.css");
+  import("tippy.js/themes/light.css");
+  import("tippy.js/animations/shift-away.css");
+
+  const defaultSettings = {
+    arrow: true,
+    theme: "light",
+    animation: "shift-away",
+  };
 
-settings = merge(defaultSettings, vuelessConfig.directives?.tooltip || {}) as DefaultProps;
+  settings = merge(defaultSettings, vuelessConfig.directives?.tooltip || {}) as DefaultProps;
+  tippy.setDefaultProps(settings);
+}
 
 function onMounted(el: TippyTargetElement, bindings: DirectiveBindingContent): void;
 function onMounted(el: TippyTargetElement, bindings: DirectiveBindingProps): void;
@@ -28,29 +36,19 @@ function onMounted(
 ): void {
   if (isSSR) return;
 
-  (async () => {
-    await import("tippy.js/dist/tippy.css");
-    await import("tippy.js/themes/light.css");
-    await import("tippy.js/animations/shift-away.css");
-
-    const { default: tippy } = await import("tippy.js");
-
-    tippy.setDefaultProps(settings);
+  if (typeof bindings.value === "string" && bindings.value.length) {
+    tippy(el, merge(settings, { content: bindings.value }));
 
-    if (typeof bindings.value === "string" && String(bindings.value).length) {
-      tippy(el, merge(settings, { content: bindings.value }));
-
-      return;
-    }
+    return;
+  }
 
-    if (
-      typeof bindings.value === "object" &&
-      bindings.value.content &&
-      String(bindings.value.content).length
-    ) {
-      tippy(el, merge(settings, bindings.value || {}));
-    }
-  })();
+  if (
+    typeof bindings.value !== "string" &&
+    bindings.value.content &&
+    String(bindings.value.content).length
+  ) {
+    tippy(el, merge(settings, bindings.value || {}));
+  }
 }
 
 function onUpdated(el: TippyTargetElement, bindings: DirectiveBindingContent): void;

package/package.json

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

package/plugin-vite.js

@@ -66,7 +66,12 @@ export const Vueless = function (options = {}) {
         "process.env": {},
       },
       optimizeDeps: {
-        include: [...(!isVuelessEnv ? ["vueless/preset-tailwind"] : [])],
+        include: [
+          ...(!isVuelessEnv ? ["vueless/preset-tailwind"] : []),
+          ...(!isVuelessEnv
+            ? ["vueless/directives/tooltip/vTooltip.ts"]
+            : ["./src/directives/tooltip/vTooltip.ts"]),
+        ],
       },
     }),
 

package/ui.form-checkbox/config.ts

@@ -9,6 +9,7 @@ export default /*tw*/ {
       focus:ring-0 focus:ring-offset-0
       focus-visible:outline-{color}-600 focus-visible:outline-dynamic focus-visible:outline-offset-2
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
+      disabled:checked:bg-gray-400 disabled:checked:border-transparent
     `,
     variants: {
       size: {
@@ -39,7 +40,7 @@ export default /*tw*/ {
         grayscale: "bg-gray-900 hover:bg-gray-800 active:bg-gray-700",
       },
       disabled: {
-        true: "border-gray-400 bg-gray-400",
+        true: "!border-gray-400 !bg-gray-400 cursor-not-allowed",
       },
     },
   },

package/ui.form-input/UInput.vue

@@ -230,7 +230,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
-  error: Boolean(props.error),
+  error: Boolean(props.error) && !props.disabled,
   label: Boolean(props.label),
   /* component state, not a props */
   typePassword: Boolean(inputValue.value && !isShownPassword.value && isTypePassword.value),

package/ui.form-input-money/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   moneyInput: "{UInput}",
   defaults: {
-    symbol: "$",
+    symbol: "",
     size: "md",
     minFractionDigits: 0,
     maxFractionDigits: 2,

package/ui.form-input-money/storybook/stories.ts

@@ -20,6 +20,8 @@ interface UInputMoneyArgs extends Props {
   enum: "labelAlign" | "size";
 }
 
+const argTypes = getArgTypes(UInputMoney.__name);
+
 export default {
   id: "3030",
   title: "Form Inputs & Controls / Input Money",
@@ -29,7 +31,12 @@ export default {
     modelValue: 245000.42,
   },
   argTypes: {
-    ...getArgTypes(UInputMoney.__name),
+    ...argTypes,
+    valueType: {
+      ...argTypes?.valueType,
+      options: (argTypes?.valueType?.table?.type?.summary as string)?.split(" | "),
+      control: "select",
+    },
   },
   parameters: {
     docs: {

package/ui.form-label/ULabel.vue

@@ -43,6 +43,10 @@ const wrapperElement = computed(() => {
   return wrapperRef.value;
 });
 
+const isShownError = computed(() => {
+  return Boolean(props.error) && !props.disabled;
+});
+
 function onClick(event: MouseEvent) {
   emit("click", event);
 }
@@ -66,7 +70,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
-  error: Boolean(props.error),
+  error: Boolean(props.error) && !props.disabled,
 }));
 
 const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Config>(
@@ -107,14 +111,14 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs }
       </label>
 
       <div
-        v-if="error"
+        v-if="isShownError"
         v-bind="descriptionAttrs"
         :data-test="getDataTest('error')"
         v-text="error"
       />
 
       <div
-        v-if="description && !error"
+        v-if="description && !isShownError"
         v-bind="descriptionAttrs"
         :data-test="getDataTest('description')"
         v-text="description"
@@ -147,10 +151,15 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs }
       <slot />
     </div>
 
-    <div v-if="error" v-bind="descriptionAttrs" :data-test="getDataTest('error')" v-text="error" />
+    <div
+      v-if="isShownError"
+      v-bind="descriptionAttrs"
+      :data-test="getDataTest('error')"
+      v-text="error"
+    />
 
     <div
-      v-if="description && !error"
+      v-if="description && !isShownError"
       v-bind="descriptionAttrs"
       :data-test="getDataTest('description')"
       v-text="description"

package/ui.form-label/config.ts

@@ -14,9 +14,9 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { align: ["left", "right"], size: "sm", class: "gap-2.5" },
-      { align: ["left", "right"], size: "md", class: "gap-3" },
-      { align: ["left", "right"], size: "lg", class: "gap-3.5" },
+      { align: ["left", "right"], size: "sm", class: "gap-2" },
+      { align: ["left", "right"], size: "md", class: "gap-2.5" },
+      { align: ["left", "right"], size: "lg", class: "gap-3" },
       { align: ["left", "right"], centred: true, class: "items-center w-auto" },
       { align: "left", centred: true, class: "justify-end" },
       { align: "right", centred: true, class: "justify-start" },
@@ -53,7 +53,7 @@ export default /*tw*/ {
       { align: "topWithDesc", size: "sm", class: "-mt-px" },
       { align: "topWithDesc", size: "md", class: "" },
       { align: "topWithDesc", size: "lg", class: "mt-px" },
-      { align: ["left", "right"], size: "sm", class: "-mt-px text-sm" },
+      { align: ["left", "right"], size: "sm", class: "-mt-0.5 text-sm" },
       { align: ["left", "right"], size: "md", class: "text-sm" },
       { align: ["left", "right"], size: "lg", class: "mt-px text-base" },
       { align: ["left", "right"], centred: false, class: "pt-1" },

package/ui.form-select/USelect.vue

@@ -409,7 +409,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
-  error: Boolean(props.error),
+  error: Boolean(props.error) && !props.disabled,
   label: Boolean(props.label),
   /* component state, not a props */
   selected: Boolean(selectedLabel.value),

package/ui.form-textarea/UTextarea.vue

@@ -186,7 +186,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
-  error: Boolean(props.error),
+  error: Boolean(props.error) && !props.disabled,
   label: Boolean(props.label),
 }));