vueless 0.0.544 → 0.0.546

package/package.json

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

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -19,7 +19,6 @@ import type { Option } from "../ui.dropdown-list/types.ts";
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UDropdownBadgeProps>(), {
-  label: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).label,
   options: () => [],
   labelKey: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).labelKey,
   variant: getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).variant,

package/ui.dropdown-button/UDropdownButton.vue

@@ -19,7 +19,6 @@ import type { Option } from "../ui.dropdown-list/types.ts";
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UDropdownButtonProps>(), {
-  label: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).label,
   options: () => [],
   labelKey: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).labelKey,
   variant: getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).variant,

package/ui.dropdown-link/UDropdownLink.vue

@@ -20,7 +20,6 @@ defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UDropdownLinkProps>(), {
   options: () => [],
-  label: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).label,
   labelKey: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).labelKey,
   color: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).color,
   size: getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).size,

package/ui.dropdown-list/UDropdownList.vue

@@ -85,7 +85,7 @@ const addOptionKeyCombination = computed(() => {
 });
 
 watch(
-  () => props.options,
+  () => [props.options, props.size],
   () => {
     nextTick(() => {
       const options = [
@@ -100,10 +100,35 @@ watch(
 
       const maxHeight = options
         .slice(0, props.visibleOptions)
-        .map((el) => el.getBoundingClientRect().height)
+        .map((el) => {
+          const elHeight = el.getBoundingClientRect().height;
+
+          const styles = window.getComputedStyle(el);
+          const marginTop = parseFloat(styles.marginTop || "0");
+          const marginBottom = parseFloat(styles.marginBottom || "0");
+
+          const [childDiv] = el.getElementsByTagName("div");
+          const childStyles = childDiv && window.getComputedStyle(childDiv);
+          const childMarginTop = parseFloat(childStyles?.marginTop || "0");
+          const childMarginBottom = parseFloat(childStyles?.marginBottom || "0");
+
+          return elHeight + marginTop + marginBottom + childMarginTop + childMarginBottom;
+        })
         .reduce((acc, cur) => acc + cur, 0);
 
-      wrapperMaxHeight.value = `${maxHeight + 10}px`;
+      const wrapperStyle = getComputedStyle(wrapperRef.value as Element);
+      const wrapperPaddingTop = parseFloat(wrapperStyle.paddingTop || "0");
+      const wrapperPaddingBottom = parseFloat(wrapperStyle.paddingBottom || "0");
+      const wrapperBorderTop = parseFloat(wrapperStyle.borderTopWidth || "0");
+      const wrapperBorderBottom = parseFloat(wrapperStyle.borderBottomWidth || "0");
+
+      wrapperMaxHeight.value = `${
+        maxHeight +
+        wrapperPaddingTop +
+        wrapperPaddingBottom +
+        wrapperBorderTop +
+        wrapperBorderBottom
+      }px`;
     });
   },
   { immediate: true },
@@ -134,7 +159,7 @@ function isSelectedOption(option: Option) {
 }
 
 function getMarginForSubCategory(level: number = 0) {
-  const baseMargin = 1;
+  const baseMargin = 0.5;
 
   if (level > 1) {
     return `margin-left: ${baseMargin * (level - 1)}rem`;

package/ui.dropdown-list/config.ts

@@ -1,16 +1,16 @@
 export default /*tw*/ {
   wrapper: `
-    my-2 flex w-full absolute right-0 z-50
-    rounded-dynamic border border-gray-300 bg-white shadow
+    my-2 p-1 flex w-full absolute z-50 shadow
+    rounded-dynamic border border-gray-300 bg-white
     overflow-auto [-webkit-overflow-scrolling:touch]
     focus:outline-none
   `,
-  list: "m-1 p-0 inline-block list-none align-top w-full",
+  list: "list-none align-top w-full h-full",
   listItem: "group/item block",
   option: {
     base: `
       rounded px-2 py-2.5 flex items-center align-middle whitespace-nowrap cursor-pointer
-      font-normal !leading-none normal-case text-gray-900
+      font-normal !leading-none text-gray-900
       hover:bg-brand-50 active:bg-brand-100
       overflow-hidden text-ellipsis
     `,
@@ -28,19 +28,8 @@ export default /*tw*/ {
   optionContent: "overflow-visible text-ellipsis",
   optionSelected: "font-bold",
   optionHighlighted: "bg-brand-50",
-  group: {
-    base: `pointer-events-none bg-transparent font-medium !leading-none uppercase text-gray-400 pt-4 pb-1
-      group-first/item:pt-2`,
-    variants: {
-      size: {
-        sm: "text-2xs",
-        md: "text-xs",
-        lg: "text-sm",
-      },
-    },
-  },
-  subGroup: {
-    base: "pointer-events-none bg-transparent font-medium !leading-none uppercase text-gray-400 pt-2",
+  groupBase: {
+    base: "px-2 pb-2.5 font-medium !leading-none text-gray-400 overflow-hidden text-ellipsis",
     variants: {
       size: {
         sm: "text-2xs",
@@ -49,6 +38,12 @@ export default /*tw*/ {
       },
     },
   },
+  group: `
+    border-t border-gray-100 group-first/item:border-none
+    mt-1.5 group-first/item:mt-0
+    pt-4 group-first/item:pt-2
+  `,
+  subGroup: "pt-2",
   addOptionLabelWrapper: "-mb-[1.375rem] active:bg-brand-100",
   addOptionLabel: "leading-none font-medium",
   addOptionLabelHotkey: "text-gray-500",

package/ui.dropdown-list/storybook/stories.ts

@@ -91,12 +91,29 @@ VisibleOptions.args = { visibleOptions: 3 };
 export const WithoutOptions = DefaultTemplate.bind({});
 WithoutOptions.args = { options: [] };
 
+export const GroupedOptions = DefaultTemplate.bind({});
+GroupedOptions.args = {
+  labelKey: "name",
+  valueKey: "name",
+  options: [
+    { groupLabel: "Javascript" },
+    { name: "Vue.js" },
+    { name: "Adonis" },
+    { groupLabel: "Ruby" },
+    { name: "Frameworks", isSubGroup: true, level: 2 },
+    { name: "Rails", level: 2 },
+    { name: "Sinatra", level: 2 },
+    { groupLabel: "Other" },
+    { name: "Laravel" },
+    { name: "Phoenix" },
+  ],
+};
+
 export const OptionSettings = DefaultTemplate.bind({});
 OptionSettings.args = {
   options: [
     { label: "option 1", id: "1" },
     { label: "option 2", id: "2", isHidden: true },
-
     {
       label: "option 3",
       id: "3",

package/ui.dropdown-list/types.ts

@@ -6,7 +6,7 @@ export type OnClickOption = (option: Omit<Option, "onClick">) => void;
 
 export interface BaseOption {
   isSubGroup?: boolean;
-  groupLabel?: boolean;
+  groupLabel?: string;
   level?: number;
   isHidden?: boolean;
   onClick?: OnClickOption;

package/ui.dropdown-list/useAttrs.ts

@@ -12,7 +12,7 @@ export default function useAttrs(props: UDropdownListProps): UseAttrs<Config> {
     () => props.config,
   );
 
-  const extendingKeys = ["option"];
+  const extendingKeys = ["option", "groupBase"];
   const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
 
   const keysAttrs = getKeysAttrs({}, [], {
@@ -20,10 +20,10 @@ export default function useAttrs(props: UDropdownListProps): UseAttrs<Config> {
       base: computed(() => [extendingKeysClasses.option.value]),
     },
     group: {
-      base: computed(() => [extendingKeysClasses.option.value]),
+      base: computed(() => [extendingKeysClasses.groupBase.value]),
     },
     subGroup: {
-      base: computed(() => [extendingKeysClasses.option.value]),
+      base: computed(() => [extendingKeysClasses.groupBase.value]),
     },
   });
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.544",
+  "version": "0.0.546",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -3955,8 +3955,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "getDefault<UDropdownBadgeProps>(defaultConfig, UDropdownBadge).label"
+              }
             },
             {
               "name": "options",
@@ -4191,8 +4190,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "getDefault<UDropdownButtonProps>(defaultConfig, UDropdownButton).label"
+              }
             },
             {
               "name": "options",
@@ -4461,8 +4459,7 @@
               "value": {
                 "kind": "expression",
                 "type": "string"
-              },
-              "default": "getDefault<UDropdownLinkProps>(defaultConfig, UDropdownLink).label"
+              }
             },
             {
               "name": "options",