v-uixy 1.9.0 → 1.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-uixy",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "private": false,
   "author": {
     "name": "Alan Haber",

package/templates/components/Button/Button.component.vue

@@ -29,7 +29,7 @@
         :transition="{ ease: 'easeInOut', duration: 0.15 }"
       >
         <uixy-icon
-          v-if="props.icon && !props.loading"
+          v-if="props.icon"
           :name="props.icon"
           :class="iconStyles({ position: props.iconPosition ?? 'left' })"
         />
@@ -67,7 +67,7 @@
         :transition="{ ease: 'easeInOut', duration: 0.15 }"
       >
         <uixy-icon
-          v-if="props.icon && !props.loading"
+          v-if="props.icon"
           :name="props.icon"
           :class="iconStyles({ position: props.iconPosition ?? 'left' })"
         />

package/templates/components/DatePicker/DatePicker.component.vue

@@ -1,10 +1,25 @@
 <template>
-  <div class="flex w-full flex-col gap-1">
-    <label v-if="props.label" :class="labelStyles({ status })">
+  <div :class="['flex flex-col gap-1', $slots.trigger ? 'w-fit' : 'w-full']">
+    <label v-if="props.label && !$slots.trigger" :class="labelStyles({ status })">
       {{ props.label }}
     </label>
 
     <div
+      v-if="$slots.trigger"
+      ref="triggerRef"
+      class="inline-flex w-fit"
+      role="button"
+      :tabindex="props.disabled ? -1 : 0"
+      :aria-expanded="active"
+      @click="onTriggerClick"
+      @keydown.enter.prevent="onTriggerClick"
+      @keydown.space.prevent="onTriggerClick"
+    >
+      <slot name="trigger" :open="active" :value="model" />
+    </div>
+
+    <div
+      v-else
       ref="triggerRef"
       role="button"
       :tabindex="props.disabled ? -1 : 0"
@@ -150,7 +165,12 @@
 
   const triggerRef = ref<HTMLElement>();
 
-  const draftTime = ref<UixyTimeParts>(timePartsOf(model.value));
+  const seedTime = (): UixyTimeParts =>
+    model.value
+      ? timePartsOf(model.value)
+      : { hour: props.defaultHour ?? 0, minute: 0, second: 0 };
+
+  const draftTime = ref<UixyTimeParts>(seedTime());
 
   const status = computed(() => {
     if (props.disabled) return "disabled";
@@ -209,11 +229,11 @@
   const clear = () => {
     model.value = null;
 
-    draftTime.value = { hour: 0, minute: 0, second: 0 };
+    draftTime.value = { hour: props.defaultHour ?? 0, minute: 0, second: 0 };
   };
 
   watch(active, (isActive) => {
-    if (isActive) draftTime.value = timePartsOf(model.value);
+    if (isActive) draftTime.value = seedTime();
   });
 
   const onDocClick = (event: MouseEvent) => {

package/templates/components/DatePicker/DatePicker.types.ts

@@ -11,6 +11,7 @@ export interface UixyDatePickerProps {
   icon?: IconName;
   withTime?: boolean;
   withSeconds?: boolean;
+  defaultHour?: number;
   startOfWeek?: "Sunday" | "Monday";
   isDateDisabled?: (date: Date) => boolean;
   direction?: "top" | "bottom";

package/templates/components/Input/Input.styles.ts

@@ -18,14 +18,16 @@ export const inputStyles = styles(
       xl: "px-3.5 py-2.5 text-base",
     },
     icon: {
-      left: "pl-8",
-      right: "pr-8",
+      left: "",
+      right: "",
       none: "",
     },
   },
   {
     "size.sm+icon.left": "pl-7",
     "size.sm+icon.right": "pr-7",
+    "size.md+icon.left": "pl-9",
+    "size.md+icon.right": "pr-9",
     "size.xl+icon.left": "pl-9",
     "size.xl+icon.right": "pr-9",
   },

package/templates/components/Modal/Modal.component.vue

@@ -12,6 +12,7 @@
           :class="modalStyles($attrs.class as string)"
           :style="{ zIndex }"
           :[modalAttr]="''"
+          :data-uixy-modal-id="id"
           data-uixy-overlay
           @click.self="handleClick"
         >
@@ -48,6 +49,7 @@
   const rootRef = ref<HTMLElement>();
 
   const {
+    id,
     zIndex,
     isTopModal,
     open: openLayer,

package/templates/composables/useOverlayLayer.ts

@@ -47,6 +47,7 @@ export function useOverlayLayer(): UseOverlayLayerReturn {
 const MANAGED_ATTR = "data-uixy-inert-managed";
 const OVERLAY_ATTR = "data-uixy-overlay";
 export const MODAL_ATTR = "data-uixy-modal";
+export const MODAL_ID_ATTR = "data-uixy-modal-id";
 
 const modalStack = ref<number[]>([]);
 
@@ -60,7 +61,11 @@ export const getTopModalEl = (): HTMLElement | null => {
   if (typeof document === "undefined") return null;
   const els = Array.from(
     document.querySelectorAll<HTMLElement>(`[${MODAL_ATTR}]`),
-  );
+  ).filter((el) => {
+    const raw = el.getAttribute(MODAL_ID_ATTR);
+    if (raw === null) return true;
+    return modalStack.value.includes(Number(raw));
+  });
   if (els.length === 0) return null;
   return els.reduce((a, b) => (zOf(b) >= zOf(a) ? b : a));
 };
@@ -92,6 +97,7 @@ function reconcileInert() {
 }
 
 export interface UseModalLayerReturn {
+  id: number;
   zIndex: ComputedRef<number>;
   isTopModal: ComputedRef<boolean>;
   open: () => void;
@@ -115,10 +121,11 @@ export function useModalLayer(): UseModalLayerReturn {
   const close = () => {
     layer.release();
     modalStack.value = modalStack.value.filter((x) => x !== layer.id);
+    reconcileInert();
     nextTick(reconcileInert);
   };
 
   onScopeDispose(close);
 
-  return { zIndex: layer.zIndex, isTopModal, open, close };
+  return { id: layer.id, zIndex: layer.zIndex, isTopModal, open, close };
 }