v-uixy 1.9.0 → 1.9.2

package/templates/components/Chart/Chart.types.ts

@@ -1,6 +1,8 @@
 export type UixyChartSeries = {
   label: string;
   values: number[];
+  color?: string;
+  baseColor?: string;
 };
 
 export type UixyChartData = {
@@ -11,8 +13,13 @@ export type UixyChartData = {
 export interface UixyChartProps {
   series?: UixyChartSeries[];
   data?: UixyChartData[];
+  labels?: string[];
+  axisLabels?: string[];
   color?: string;
   baseColor?: string;
   rows?: number;
   animate?: boolean;
+  axis?: boolean;
+  interactive?: boolean;
+  format?: (value: number) => string;
 }

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"
         >
@@ -35,7 +36,12 @@
   import type { UixyModalProps } from "./Modal.types";
   import { modalStyles } from "./Modal.styles";
   import { AnimatePresence, motion } from "motion-v";
-  import { useModalLayer, MODAL_ATTR, getTopModalEl } from "~/composables";
+  import {
+    useModalLayer,
+    useGpuAcceleration,
+    MODAL_ATTR,
+    getTopModalEl,
+  } from "~/composables";
 
   const props = defineProps<UixyModalProps>();
 
@@ -48,12 +54,15 @@
   const rootRef = ref<HTMLElement>();
 
   const {
+    id,
     zIndex,
     isTopModal,
     open: openLayer,
     close: closeLayer,
   } = useModalLayer();
 
+  useGpuAcceleration();
+
   const modalAttr = computed(() => (open.value ? MODAL_ATTR : null));
 
   const handleClick = () => {

package/templates/components/Modal/Modal.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 const modalStyles = styles(
-  "fixed left-0 top-0 flex size-full items-center justify-center bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
+  "fixed left-0 top-0 flex size-full items-center justify-center bg-white/5 [html[data-uixy-gpu=on]_&]:backdrop-blur-[2px] dark:bg-gray-900/5"
 );
 
 export { modalStyles };