v-uixy 1.9.1 → 1.9.3

package/templates/components/PieChart/PieChart.types.ts

@@ -1,10 +1,16 @@
 export type UixyPieChartData = {
   label: string;
   value: number;
-  color: string;
+  color?: string;
 };
 
 export interface UixyPieChartProps {
   data: UixyPieChartData[];
+  resolution?: number;
   thickness?: number;
+  total?: string;
+  legend?: boolean;
+  animate?: boolean;
+  interactive?: boolean;
+  format?: (value: number) => string;
 }

package/templates/components/Select/Select.component.vue

@@ -10,37 +10,49 @@
         @keydown="handleKeydownSelect"
         v-bind="filteredAttrs"
       >
-        <p
-          v-if="props.placeholder && (!model || model.length === 0)"
-          class="pointer-events-none select-none text-gray-500 dark:text-gray-700"
-        >
-          {{ props.placeholder }}
-        </p>
-        <div
-          v-if="props.multiple"
-          :class="badgesWrapperStyles({ disabled: props.disabled })"
-        >
-          <uixy-badge
-            v-for="(item, index) in model as string[]"
-            data-badge
-            variant="tertiary"
-            size="xs"
-            shape="pill"
-            :key="`${item}--${index}`"
-            @click.stop="handleClickSelectedOption(item)"
+        <div :class="valueWrapperStyles()">
+          <p
+            v-if="props.placeholder && (!model || model.length === 0)"
+            class="pointer-events-none select-none truncate text-gray-500 dark:text-gray-700"
           >
-            {{ getLabel(item) }}
-          </uixy-badge>
+            {{ props.placeholder }}
+          </p>
+          <div
+            v-if="props.multiple"
+            :class="badgesWrapperStyles({ disabled: props.disabled })"
+          >
+            <uixy-badge
+              v-for="(item, index) in model as string[]"
+              data-badge
+              variant="tertiary"
+              size="xs"
+              shape="pill"
+              class="max-w-full"
+              :key="`${item}--${index}`"
+              @click.stop="handleClickSelectedOption(item)"
+            >
+              <span class="min-w-0 truncate">{{ getLabel(item) }}</span>
+            </uixy-badge>
+          </div>
+          <p v-else class="truncate">{{ getLabel(model as string) }}</p>
+        </div>
+
+        <div :class="trailingStyles()">
+          <span
+            v-if="hasMax"
+            :class="counterStyles({ full: isAtMax, size })"
+            aria-live="polite"
+          >
+            {{ selectedValues.length }}/{{ props.max }}
+          </span>
+          <uixy-icon
+            v-if="!props.multiple && model && minSelected === 0"
+            name="close"
+            :class="deselectIconStyles({ size })"
+            @click.stop="handleDeselect"
+          />
+          <uixy-icon name="chevron-down" :class="iconStyles({ open, size })" />
         </div>
-        <p v-else>{{ getLabel(model as string) }}</p>
-
-        <uixy-icon
-          v-if="props.deselectable && !props.multiple && model"
-          name="close"
-          :class="deselectIconStyles({ size })"
-          @click.stop="handleDeselect"
-        />
-        <uixy-icon name="chevron-down" :class="iconStyles({ open, size })" />
       </div>
 
       <teleport to="body">
@@ -78,6 +90,7 @@
                     :depth="0"
                     :is-selected="isSelected"
                     :is-partially-selected="isPartiallySelected"
+                    :is-blocked="isBlocked"
                     :expanded-items="effectiveExpandedItems"
                     :leaf-only="props.leafOnly"
                     :multiple="props.multiple"
@@ -105,12 +118,14 @@
               <ul v-else class="flex flex-col gap-1 py-1">
                 <li
                   v-for="option in filteredOptions"
-                  :tabIndex="option.disabled ? -1 : 0"
+                  :tabIndex="option.disabled || isBlocked(option) ? -1 : 0"
+                  :aria-disabled="isBlocked(option) || undefined"
                   :key="option.value ?? option.label"
                   :class="
                     itemStyles({
                       selected: isSelected(option),
                       disabled: !!option.disabled,
+                      blocked: isBlocked(option),
                       size,
                     })
                   "
@@ -197,6 +212,9 @@
     dropdownPanelStyles,
     listItemPaddingStyles,
     checkIconStyles,
+    valueWrapperStyles,
+    trailingStyles,
+    counterStyles,
   } from "./Select.styles";
   import type { UixySelectEmits, UixySelectProps } from "./Select.types";
   import { UixyBadge } from "../Badge";
@@ -207,7 +225,10 @@
   import { useOverlayLayer } from "~/composables";
   import SelectTreeItem from "./SelectTreeItem.vue";
 
-  const props = defineProps<UixySelectProps>();
+  const props = withDefaults(defineProps<UixySelectProps>(), {
+    deselectable: true,
+    maxBehavior: "block",
+  });
 
   const emits = defineEmits<UixySelectEmits>();
 
@@ -249,8 +270,13 @@
     filteredOptions,
     effectiveExpandedItems,
     customAddVisible,
+    selectedValues,
+    hasMax,
+    isAtMax,
+    minSelected,
     isSelected,
     isPartiallySelected,
+    isBlocked,
     getLabel,
     toggleExpand,
     handleOpen,
@@ -340,7 +366,7 @@
 
       if (!isOpen) return;
 
-      acquireLayer();
+      acquireLayer(refTrigger.value);
 
       void updateDropdownPosition();
 

package/templates/components/Select/Select.styles.ts

@@ -1,7 +1,7 @@
 import styles from "~/utils/styles";
 
 export const selectStyles = styles(
-  "relative select-none peer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 placeholder:text-gray-500 dark:placeholder:text-gray-700 dark:outline-gray-800 outline-offset-1 outline-gray-300",
+  "relative flex items-center gap-2 select-none peer transition-colors ease-in-out duration-150 border border-gray-300 dark:border-gray-900 rounded-1 placeholder:text-gray-500 dark:placeholder:text-gray-700 dark:outline-gray-800 outline-offset-1 outline-gray-300",
   {
     status: {
       default:
@@ -14,35 +14,56 @@ export const selectStyles = styles(
         "bg-white dark:bg-gray-1000 focus-visible:border-gray-500 dark:focus-visible:border-gray-600 cursor-pointer",
     },
     size: {
-      sm: "pl-2.5 pr-5 py-1.5 text-xs min-h-[32px]",
-      md: "pl-3 pr-6 py-2 text-sm min-h-[38px]",
-      xl: "pl-3.5 pr-7 py-2.5 text-base min-h-[42px]",
+      sm: "pl-2.5 pr-1.5 py-1.5 text-xs min-h-[32px]",
+      md: "pl-3 pr-2 py-2 text-sm min-h-[38px]",
+      xl: "pl-3.5 pr-2.5 py-2.5 text-base min-h-[42px]",
+    },
+  },
+);
+
+export const valueWrapperStyles = styles("min-w-0 flex-1");
+
+export const trailingStyles = styles(
+  "ml-auto flex shrink-0 items-center gap-1.5",
+);
+
+export const counterStyles = styles(
+  "pointer-events-none shrink-0 select-none tabular-nums transition-colors duration-150 ease-in-out",
+  {
+    full: {
+      true: "text-gray-900 dark:text-gray-300",
+      false: "text-gray-500 dark:text-gray-600",
+    },
+    size: {
+      sm: "text-[10px]",
+      md: "text-xs",
+      xl: "text-sm",
     },
   },
 );
 
 export const iconStyles = styles(
-  "pointer-events-none absolute top-1/2 -translate-y-1/2 select-none transition-transform duration-200 ease-in-out",
+  "pointer-events-none shrink-0 select-none transition-transform duration-200 ease-in-out",
   {
     open: {
       true: "rotate-180",
       false: "",
     },
     size: {
-      sm: "h-3.5 w-3.5 right-1.5",
-      md: "h-4 w-4 right-2",
-      xl: "h-4 w-4 right-2.5",
+      sm: "h-3.5 w-3.5",
+      md: "h-4 w-4",
+      xl: "h-4 w-4",
     },
   },
 );
 
 export const deselectIconStyles = styles(
-  "absolute top-1/2 -translate-y-1/2 cursor-pointer z-10 text-gray-500 dark:text-gray-600 hover:text-black dark:hover:text-gray-400",
+  "shrink-0 cursor-pointer text-gray-500 dark:text-gray-600 hover:text-black dark:hover:text-gray-400",
   {
     size: {
-      sm: "h-3.5 w-3.5 right-6",
-      md: "h-4 w-4 right-7",
-      xl: "h-4 w-4 right-8",
+      sm: "h-3.5 w-3.5",
+      md: "h-4 w-4",
+      xl: "h-4 w-4",
     },
   },
 );
@@ -71,6 +92,10 @@ export const itemStyles = styles(
       true: "pointer-events-none text-gray-500 dark:text-gray-700",
       false: "",
     },
+    blocked: {
+      true: "cursor-not-allowed text-gray-400 dark:text-gray-700 hover:bg-transparent dark:hover:bg-transparent focus-visible:bg-transparent dark:focus-visible:bg-transparent",
+      false: "",
+    },
     size: {
       sm: "py-1.5 px-2.5",
       md: "py-2 px-3",

package/templates/components/Select/Select.types.ts

@@ -20,6 +20,8 @@ export interface UixySelectEmits {
   (event: "openChange", isOpen: boolean): void;
 }
 
+export type UixySelectMaxBehavior = "block" | "replace";
+
 export type UixySelectProps = {
   options: UixySelectOptionType[];
   status: "valid" | "error" | "default";
@@ -31,7 +33,9 @@ export type UixySelectProps = {
   helperText?: string;
   errorText?: string;
   autoFocus?: boolean;
+  min?: number;
   max?: number;
+  maxBehavior?: UixySelectMaxBehavior;
   tree?: boolean;
   leafOnly?: boolean;
   autoOpen?: boolean;

package/templates/components/Select/SelectTreeItem.vue

@@ -1,17 +1,19 @@
 <template>
   <li class="flex flex-col">
     <div
-      :tabIndex="option.disabled ? -1 : 0"
+      :tabIndex="option.disabled || isOptionBlocked ? -1 : 0"
+      :aria-disabled="isOptionBlocked || undefined"
       :class="
         itemStyles({
           selected: isSelected(option),
           disabled: !!option.disabled,
+          blocked: isOptionBlocked,
           size: props.size ?? 'md',
         })
       "
       :style="{
         paddingLeft: `${depth * 28 + 12}px`,
-        cursor: option.disabled ? 'not-allowed' : 'pointer',
+        cursor: option.disabled || isOptionBlocked ? 'not-allowed' : 'pointer',
       }"
       @click.stop="handleItemClick"
     >
@@ -65,6 +67,7 @@
           :depth="depth + 1"
           :is-selected="isSelected"
           :is-partially-selected="isPartiallySelected"
+          :is-blocked="isBlocked"
           :expanded-items="expandedItems"
           :leaf-only="leafOnly"
           :multiple="multiple"
@@ -91,6 +94,7 @@
     depth: number;
     isSelected: (option: UixySelectOptionType) => boolean;
     isPartiallySelected?: (option: UixySelectOptionType) => boolean;
+    isBlocked?: (option: UixySelectOptionType) => boolean;
     expandedItems: string[];
     leafOnly?: boolean;
     multiple?: boolean;
@@ -139,6 +143,10 @@
     props.expandedItems.includes(getValue(props.option)),
   );
 
+  const isOptionBlocked = computed(
+    () => !!props.isBlocked?.(props.option),
+  );
+
   const isNotSelectable = computed(
     () =>
       props.option.disabled ||
@@ -146,7 +154,7 @@
   );
 
   const handleItemClick = () => {
-    if (props.option.disabled) return;
+    if (props.option.disabled || isOptionBlocked.value) return;
 
     if (props.leafOnly && hasChildrenInOriginal.value && !props.multiple) {
       emit("toggle-expand", getValue(props.option));