cisse-vue-ui 0.8.2 → 0.8.4

package/dist/{CheckboxGroup.vue_vue_type_script_setup_true_lang-N4oS_DJD.js → CheckboxGroup.vue_vue_type_script_setup_true_lang-B190Yija.js}

@@ -1,7 +1,8 @@
-import { defineComponent, createElementBlock, openBlock, renderSlot, createTextVNode, toDisplayString, useSlots, computed, normalizeClass, createCommentVNode, createBlock, unref, mergeModels, useModel, withCtx, withDirectives, createElementVNode, mergeProps, vModelDynamic, ref, watch, createVNode, Teleport, Transition, normalizeStyle, vModelText, Fragment, renderList, nextTick, withModifiers, withKeys, vShow, createSlots, onMounted, TransitionGroup } from "vue";
+import { defineComponent, createElementBlock, openBlock, renderSlot, createTextVNode, toDisplayString, useSlots, computed, toRef, normalizeClass, createCommentVNode, createBlock, unref, mergeModels, useModel, withCtx, withDirectives, createElementVNode, mergeProps, vModelDynamic, ref, watch, createVNode, Teleport, Transition, normalizeStyle, vModelText, Fragment, renderList, nextTick, withModifiers, withKeys, vShow, createSlots, onMounted, TransitionGroup } from "vue";
 import { u as useId } from "./useId-xeHj7rkg.js";
 import { Icon } from "@iconify/vue";
-import { u as useDropdown } from "./useDropdown-De0cKI83.js";
+import { u as useDropdown } from "./useDropdown-XITCE_SM.js";
+import { u as useInputStyles } from "./useInputStyles-BFTJdXHL.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
 import { o as onClickOutside, a as useDebounceFn, _ as _sfc_main$v } from "./index-SNefWfX0.js";
 import { _ as _sfc_main$u } from "./Button.vue_vue_type_script_setup_true_lang-CBYr0Z2_.js";
@@ -64,33 +65,22 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     size: { default: "md" },
     invalid: { type: Boolean },
     disabled: { type: Boolean },
+    focused: { type: Boolean },
     wrapperClass: {}
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
     const slots = useSlots();
-    const hasLeftIcon = computed(() => props.icon || slots.icon);
-    const hasRightContent = computed(() => props.iconRight || slots.actions);
-    const inputClass = computed(() => [
-      // Base styles
-      "block w-full rounded-xl border text-sm transition-all",
-      "border-gray-200 bg-gray-50 text-gray-900 placeholder-gray-400",
-      "focus:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:bg-white focus:outline-hidden",
-      "disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed",
-      // Dark mode
-      "dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-500",
-      "dark:focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:bg-slate-600",
-      "dark:disabled:bg-slate-800 dark:disabled:text-gray-500",
-      // Padding based on icons/actions
-      hasLeftIcon.value ? "pl-10" : "pl-4",
-      hasRightContent.value ? "pr-10" : "pr-4",
-      // Size
-      props.size === "sm" && "py-2 text-xs",
-      props.size === "md" && "py-3 text-sm",
-      props.size === "lg" && "py-4 text-base",
-      // Invalid state
-      props.invalid && "border-red-500 focus:border-red-500 focus:ring-red-500 dark:border-red-500"
-    ]);
+    const hasLeftIcon = computed(() => !!props.icon || !!slots.icon);
+    const hasRightContent = computed(() => !!props.iconRight || !!slots.actions);
+    const { inputClass, iconClass } = useInputStyles({
+      disabled: toRef(props, "disabled"),
+      invalid: toRef(props, "invalid"),
+      focused: toRef(props, "focused"),
+      size: toRef(props, "size"),
+      hasLeftIcon,
+      hasRightIcon: hasRightContent
+    });
     __expose({ inputClass });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
@@ -101,18 +91,18 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
             __props.icon ? (openBlock(), createBlock(unref(Icon), {
               key: 0,
               icon: __props.icon,
-              class: "size-5"
-            }, null, 8, ["icon"])) : createCommentVNode("", true)
+              class: normalizeClass(unref(iconClass))
+            }, null, 8, ["icon", "class"])) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "default", { inputClass: inputClass.value }),
+        renderSlot(_ctx.$slots, "default", { inputClass: unref(inputClass) }),
         hasRightContent.value ? (openBlock(), createElementBlock("div", _hoisted_2$i, [
           renderSlot(_ctx.$slots, "actions", {}, () => [
             __props.iconRight ? (openBlock(), createBlock(unref(Icon), {
               key: 0,
               icon: __props.iconRight,
-              class: "size-5 text-gray-400 pointer-events-none"
-            }, null, 8, ["icon"])) : createCommentVNode("", true)
+              class: normalizeClass([unref(iconClass), "pointer-events-none"])
+            }, null, 8, ["icon", "class"])) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true)
       ], 2);
@@ -214,7 +204,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     teleport: { type: Boolean, default: true },
     searchable: { type: Boolean, default: false },
     noResultsText: { default: "No results found" },
-    triggerClass: {}
+    triggerClass: {},
+    size: { default: "md" }
   }, {
     "modelValue": { type: [String, Number, Boolean, null] },
     "modelModifiers": {}
@@ -309,12 +300,17 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     watch(searchQuery, () => {
       highlightedIndex.value = 0;
     });
-    const triggerClasses = computed(() => {
-      const base = "flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm text-left transition";
-      const state = props.disabled ? "cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-500" : isOpen.value ? "border-primary ring-2 ring-primary/20 bg-white dark:bg-gray-900" : "border-gray-300 bg-white hover:border-gray-400 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600";
-      const text = selectedOption.value ? "text-gray-800 dark:text-gray-200" : "text-gray-400 dark:text-gray-500";
-      return [base, state, text, props.triggerClass];
+    const hasValue = computed(() => !!selectedOption.value);
+    const { triggerClass } = useInputStyles({
+      disabled: computed(() => props.disabled),
+      focused: isOpen,
+      hasValue,
+      size: toRef(props, "size")
     });
+    const triggerClasses = computed(() => [
+      ...triggerClass.value,
+      props.triggerClass
+    ]);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$p, [
         createElementVNode("button", {
@@ -752,7 +748,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     minDate: {},
     maxDate: {},
     teleport: { type: Boolean, default: true },
-    id: {}
+    id: {},
+    size: { default: "md" }
   }, {
     "modelValue": { default: null },
     "modelModifiers": {}
@@ -865,6 +862,13 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       });
       return formatter.format(date);
     };
+    const hasValue = computed(() => !!modelValue.value);
+    const { triggerClass } = useInputStyles({
+      disabled: computed(() => props.disabled),
+      focused: isOpen,
+      hasValue,
+      size: toRef(props, "size")
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$k, [
         createElementVNode("button", {
@@ -876,11 +880,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           "aria-expanded": unref(isOpen),
           "aria-haspopup": "dialog",
           "aria-controls": calendarId.value,
-          class: normalizeClass([
-            "flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm text-left transition",
-            __props.disabled ? "cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500 dark:border-gray-800 dark:bg-gray-950" : unref(isOpen) ? "border-primary ring-2 ring-primary/20 bg-white dark:bg-gray-900" : "border-gray-300 bg-white hover:border-gray-400 dark:border-gray-700 dark:bg-gray-900",
-            modelValue.value ? "text-gray-900 dark:text-white" : "text-gray-400 dark:text-gray-500"
-          ]),
+          class: normalizeClass(unref(triggerClass)),
           onClick: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => unref(toggle) && unref(toggle)(...args))
         }, [
@@ -1653,7 +1653,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     noResultsText: { default: "No results found" },
     name: {},
     id: {},
-    teleport: { type: [String, Boolean], default: false }
+    teleport: { type: [String, Boolean], default: false },
+    size: { default: "md" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -1732,6 +1733,13 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         search.value = "";
       }
     });
+    const hasValue = computed(() => selectedOptions.value.length > 0);
+    const { triggerClass } = useInputStyles({
+      disabled: computed(() => props.disabled),
+      focused: isOpen,
+      hasValue,
+      size: toRef(props, "size")
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "containerRef",
@@ -1743,11 +1751,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           "aria-expanded": isOpen.value,
           "aria-haspopup": "listbox",
           "aria-controls": listboxId.value,
-          class: normalizeClass([
-            "flex min-h-[42px] w-full cursor-pointer items-center rounded-lg border bg-white px-3 py-2 transition-colors",
-            "dark:bg-gray-900",
-            __props.disabled ? "cursor-not-allowed border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800" : isOpen.value ? "border-primary ring-2 ring-primary/20" : "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
-          ]),
+          class: normalizeClass(["cursor-pointer", ...unref(triggerClass)]),
           onClick: openDropdown
         }, [
           !isOpen.value ? (openBlock(), createElementBlock("span", {
@@ -2511,12 +2515,12 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             createElementVNode("button", {
               type: "button",
               disabled: __props.disabled,
-              class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-slate-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+              class: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
               onClick: toggleVisibility
             }, [
               createVNode(unref(Icon), {
                 icon: showPassword.value ? "lucide:eye-off" : "lucide:eye",
-                class: "size-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                class: "size-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
               }, null, 8, ["icon"])
             ], 8, _hoisted_2$6)
           ]),
@@ -3539,12 +3543,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (props.max !== void 0) return modelValue.value.length < props.max;
       return true;
     });
+    const { wrapperClass } = useInputStyles({
+      disabled: toRef(props, "disabled"),
+      size: toRef(props, "size")
+    });
     const sizeClasses = computed(() => ({
-      wrapper: {
-        sm: "min-h-9 py-1.5 px-2 gap-1",
-        md: "min-h-11 py-2 px-3 gap-1.5",
-        lg: "min-h-13 py-2.5 px-4 gap-2"
-      }[props.size],
       tag: {
         sm: "text-xs px-2 py-0.5",
         md: "text-sm px-2.5 py-1",
@@ -3593,14 +3596,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     __expose({ focus: focusInput });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([
-          "flex flex-wrap items-center rounded-xl border transition-all cursor-text",
-          "bg-gray-50 dark:bg-slate-700",
-          "border-gray-200 dark:border-slate-600",
-          "focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:bg-white dark:focus-within:bg-slate-600",
-          __props.disabled && "opacity-50 cursor-not-allowed",
-          sizeClasses.value.wrapper
-        ]),
+        class: normalizeClass(unref(wrapperClass)),
         onClick: focusInput
       }, [
         createVNode(TransitionGroup, {
@@ -3648,7 +3644,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           required: __props.required && modelValue.value.length === 0,
           class: [
             "flex-1 min-w-20 bg-transparent border-none focus:outline-none",
-            "text-gray-900 dark:text-white placeholder-gray-400",
+            "text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500",
+            __props.disabled && "text-gray-500 dark:text-gray-500",
             sizeClasses.value.input
           ]
         }, _ctx.$attrs, {
@@ -3661,7 +3658,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TagsInput = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-fb9f5eb1"]]);
+const TagsInput = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-46cfbdf1"]]);
 const _hoisted_1$1 = {
   key: 0,
   class: "text-red-500 ml-1"
@@ -3687,7 +3684,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     rows: { default: 3 },
     maxLength: {},
     showCount: { type: Boolean, default: false },
-    resize: { default: "vertical" }
+    resize: { default: "vertical" },
+    size: { default: "md" }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -3697,6 +3695,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       var _a;
       return ((_a = props.modelValue) == null ? void 0 : _a.length) ?? 0;
     });
+    const { inputClass } = useInputStyles({
+      disabled: toRef(props, "disabled"),
+      invalid: computed(() => !!props.error),
+      size: toRef(props, "size")
+    });
     const resizeClass = computed(() => {
       switch (props.resize) {
         case "none":
@@ -3738,12 +3741,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           rows: __props.rows,
           maxlength: __props.maxLength,
           class: normalizeClass([
-            "w-full px-4 py-3 rounded-xl border transition-all duration-200",
-            "focus:outline-none focus:ring-2 focus:ring-offset-0",
+            unref(inputClass),
             resizeClass.value,
-            __props.label || _ctx.$slots.label ? "mt-2" : "",
-            __props.error ? "border-red-300 dark:border-red-500 focus:border-red-500 focus:ring-red-500/20" : "border-gray-200 dark:border-slate-600 focus:border-primary-500 focus:ring-primary-500/20",
-            __props.disabled ? "bg-gray-50 dark:bg-slate-800 text-gray-400 cursor-not-allowed" : "bg-white dark:bg-slate-700 text-gray-900 dark:text-white"
+            __props.label || _ctx.$slots.label ? "mt-2" : ""
           ]),
           onInput: handleInput
         }, null, 42, _hoisted_2),
@@ -3898,4 +3898,4 @@ export {
   _sfc_main$3 as y,
   _sfc_main$1 as z
 };
-//# sourceMappingURL=CheckboxGroup.vue_vue_type_script_setup_true_lang-N4oS_DJD.js.map
+//# sourceMappingURL=CheckboxGroup.vue_vue_type_script_setup_true_lang-B190Yija.js.map