fix(select): refacto the select

- select popover display rework to avoid framework delegate fixes: #63
CheeseGrinder · Dec 18, 2024 · c3b5ac2 · c3b5ac2
1 parent 19b76ea
commit c3b5ac2
Show file tree

Hide file tree

Showing 22 changed files with 2,132 additions and 3,292 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,10 +21,10 @@
     "prepare": "git config core.hooksPath .githooks"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.9.3",
-    "@commitlint/cli": "^19.5.0",
-    "@commitlint/config-conventional": "^19.5.0",
-    "@types/node": "^22.7.4",
+    "@biomejs/biome": "^1.9.4",
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@types/node": "^22.10.2",
     "audit-ci": "^7.1.0"
   },
   "engines": {

diff --git a/packages/core/api.txt b/packages/core/api.txt
@@ -123,10 +123,11 @@ pop-dropdown,prop,open,boolean,undefined,false,true
 pop-dropdown,prop,showBackdrop,boolean,undefined,false,true
 pop-dropdown,prop,side,"bottom" | "end" | "left" | "right" | "start" | "top",undefined,false,true
 pop-dropdown,prop,triggerAction,"click" | "context-menu" | "hover",undefined,false,false
-pop-dropdown,method,dismiss,dismiss() => Promise<boolean>
+pop-dropdown,method,dismiss,dismiss(data?: any) => Promise<boolean>
 pop-dropdown,method,present,present() => Promise<boolean>
-pop-dropdown,event,didDismiss,void,true
-pop-dropdown,event,didPresent,void,true
+pop-dropdown,method,toggle,toggle() => Promise<boolean>
+pop-dropdown,event,dismiss,void,true
+pop-dropdown,event,present,void,true
 pop-dropdown,css-prop,--background
 pop-dropdown,css-prop,--border-color
 pop-dropdown,css-prop,--border-radius
@@ -371,13 +372,15 @@ pop-select,prop,selectedText,string,undefined,false,false
 pop-select,prop,size,"lg" | "md" | "sm" | "xs",undefined,false,true
 pop-select,prop,tooManyErrorText,string,undefined,false,false
 pop-select,prop,value,any,null,false,false
-pop-select,method,close,close() => Promise<void>
-pop-select,method,open,open(event?: any) => Promise<HTMLPopPopoverElement>
+pop-select,method,dismiss,dismiss() => Promise<boolean>
+pop-select,method,present,present() => Promise<boolean>
 pop-select,method,setFocus,setFocus() => Promise<void>
+pop-select,method,toggle,toggle() => Promise<boolean>
+pop-select,event,dismiss,void,true
 pop-select,event,popBlur,void,true
 pop-select,event,popChange,SelectChangeEventDetail<any>,true
-pop-select,event,popDismiss,void,true
 pop-select,event,popFocus,void,true
+pop-select,event,present,void,true
 pop-select,css-prop,--background
 pop-select,css-prop,--border-color
 pop-select,css-prop,--border-radius

diff --git a/packages/core/output/vue.ts b/packages/core/output/vue.ts
@@ -0,0 +1,47 @@
+import { vueOutputTarget } from '@stencil/vue-output-target';
+import type { JSX } from '../src/components';
+
+type ComponentTag = keyof JSX.IntrinsicElements;
+type VueComponentModel = {
+  elements: ComponentTag | ComponentTag[];
+  event: string;
+  targetAttr: string;
+};
+
+export function vueOutput(core: string, ssr = false) {
+  const ssrOptions: Parameters<typeof vueOutputTarget>[0] = {
+    hydrateModule: `${core}/hydrate`,
+    proxiesFile: '../nuxt/src/proxies.ts',
+  };
+
+  return vueOutputTarget({
+    includeImportCustomElements: true,
+    includePolyfills: false,
+    includeDefineCustomElements: false,
+    componentCorePackage: core,
+    proxiesFile: '../vue/src/proxies.ts',
+    componentModels: <VueComponentModel[]>[
+      {
+        elements: ['pop-checkbox', 'pop-toggle'],
+        targetAttr: 'checked',
+        event: 'pop-change',
+      },
+      {
+        elements: ['pop-swap', 'pop-accordion-group'],
+        targetAttr: 'active',
+        event: 'pop-change',
+      },
+      {
+        elements: ['pop-radio', 'pop-radio-group', 'pop-select', 'pop-range'],
+        targetAttr: 'value',
+        event: 'pop-change',
+      },
+      {
+        elements: ['pop-input', 'pop-textarea'],
+        targetAttr: 'value',
+        event: 'pop-input',
+      },
+    ],
+    ...(ssr ? ssrOptions : {}),
+  });
+}
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -62,24 +62,24 @@
     "stencil": "stencil"
   },
   "dependencies": {
-    "@stencil/core": "^4.22.3"
+    "@stencil/core": "4.23.0"
   },
   "devDependencies": {
     "@cheese-grinder/stencil-component-config": "^0.4.1",
     "@cheese-grinder/stencil-custom-readme": "^0.1.7",
     "@cheese-grinder/stencil-sass-alias": "~0.2.4",
-    "@playwright/test": "^1.49.0",
+    "@playwright/test": "^1.49.1",
     "@stencil/playwright": "^0.2.1",
     "@stencil/sass": "^3.0.12",
-    "@stencil/vue-output-target": "^0.9.0",
+    "@stencil/vue-output-target": "^0.9.1",
     "@types/jest": "^29.5.14",
-    "@types/node": "~22.10.1",
+    "@types/node": "~22.10.2",
     "clean-css-cli": "^5.6.3",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "key-definitions": "^2.0.3",
     "rimraf": "^6.0.1",
-    "sass": "^1.81.1",
+    "sass": "^1.83.0",
     "typescript": "^5.7.2"
   }
 }
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -24,7 +24,6 @@ import { MaskType } from "./components/mask/mask.type";
 import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group.type";
 import { RangeChangeEventDetail, RangeColor } from "./components/range/range.type";
 import { SelectChangeEventDetail, SelectColor, SelectCompareFn } from "./components/select/select.type";
-import { SelectPopoverOption } from "./components/select-popover/select-popover.type";
 import { SwapChangeEventDetail, SwapType } from "./components/swap/swap.type";
 import { TextareaChangeEventDetail, TextareaColor, TextareaInputEventDetail, Wrap } from "./components/textarea/textarea.type";
 import { ToggleChangeEventDetail, ToggleColor } from "./components/toggle/toggle.type";
@@ -48,7 +47,6 @@ export { MaskType } from "./components/mask/mask.type";
 export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group.type";
 export { RangeChangeEventDetail, RangeColor } from "./components/range/range.type";
 export { SelectChangeEventDetail, SelectColor, SelectCompareFn } from "./components/select/select.type";
-export { SelectPopoverOption } from "./components/select-popover/select-popover.type";
 export { SwapChangeEventDetail, SwapType } from "./components/swap/swap.type";
 export { TextareaChangeEventDetail, TextareaColor, TextareaInputEventDetail, Wrap } from "./components/textarea/textarea.type";
 export { ToggleChangeEventDetail, ToggleColor } from "./components/toggle/toggle.type";
@@ -366,7 +364,7 @@ export namespace Components {
           * Close the dropdown.
           * @returns return `true` if the dropdown has been closed, otherwise `false`.
          */
-        "dismiss": () => Promise<boolean>;
+        "dismiss": (data?: any) => Promise<boolean>;
         /**
           * Force the dropdown to be shown
           * @config 
@@ -390,6 +388,10 @@ export namespace Components {
           * @default "bottom"
          */
         "side"?: DropdownSide;
+        /**
+          * Toggle the select dropdown
+         */
+        "toggle": () => Promise<boolean>;
         /**
           * Describes what kind of intertion with the trigger (sloted element) that should cause the dropdown to open. - `"click"`: the dropdown will be presented when the trigger is left clicked. - `"hover"`: the dropdown will be presented when a pointer hovers over the trigger. - `"context-menu"`: the dropdown will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
           * @config 
@@ -1013,7 +1015,6 @@ export namespace Components {
           * @default false
          */
         "bordered"?: boolean;
-        "close": () => Promise<void>;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
           * @config
@@ -1030,6 +1031,11 @@ export namespace Components {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Close the select dropdown
+          * @returns `true` if the select dropdown has been closed, otherwise `false`.
+         */
+        "dismiss": () => Promise<boolean>;
         /**
           * Text that is placed under the textarea and displayed when no error is detected.
          */
@@ -1058,11 +1064,15 @@ export namespace Components {
           * Only apply when `multiple` property is used. Text that is placed under the select and displayed when the amount of selected option is below of the `min` property.
          */
         "notEnoughErrorText"?: string;
-        "open": (event?: any) => Promise<HTMLPopPopoverElement>;
         /**
           * Instructional text that shows before the input has a value.  This property replace the `<option disabled selected>`
          */
         "placeholder"?: string;
+        /**
+          * Open the select dropdown
+          * @returns `true` if the select dropdown has been opened, otherwise `false`.
+         */
+        "present": () => Promise<boolean>;
         /**
           * If `true`, the user must fill in a value before submitting a form.
           * @config 
@@ -1083,6 +1093,10 @@ export namespace Components {
           * @default "md"
          */
         "size"?: Size;
+        /**
+          * Toggle the select dropdown
+         */
+        "toggle": () => Promise<boolean>;
         /**
           * Only apply when `multiple` property is used. Text that is placed under the select and displayed when the amount of selected option is greater of the `max` property.
          */
@@ -1110,28 +1124,6 @@ export namespace Components {
          */
         "value"?: any | null;
     }
-    interface PopSelectPopover {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-         */
-        "color"?: Color;
-        /**
-          * If `true`, the select accepts multiple values
-         */
-        "multiple"?: boolean;
-        /**
-          * An array of options for the popover
-         */
-        "options": SelectPopoverOption[];
-        /**
-          * If `true`, allow empty on radio options
-         */
-        "required"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-         */
-        "size"?: Size;
-    }
     /**
      * Swap allows you to toggle the visibility of two elements.
      */
@@ -1599,8 +1591,8 @@ declare global {
         new (): HTMLPopDrawerElement;
     };
     interface HTMLPopDropdownElementEventMap {
-        "didPresent": void;
-        "didDismiss": void;
+        "present": void;
+        "dismiss": void;
     }
     /**
      * Dropdown can open a menu or any other element when the trigger element is clicked.
@@ -1862,7 +1854,8 @@ declare global {
         new (): HTMLPopRangeElement;
     };
     interface HTMLPopSelectElementEventMap {
-        "popDismiss": void;
+        "present": void;
+        "dismiss": void;
         "popChange": SelectChangeEventDetail;
         "popFocus": void;
         "popBlur": void;
@@ -1887,12 +1880,6 @@ declare global {
         prototype: HTMLPopSelectOptionElement;
         new (): HTMLPopSelectOptionElement;
     };
-    interface HTMLPopSelectPopoverElement extends Components.PopSelectPopover, HTMLStencilElement {
-    }
-    var HTMLPopSelectPopoverElement: {
-        prototype: HTMLPopSelectPopoverElement;
-        new (): HTMLPopSelectPopoverElement;
-    };
     interface HTMLPopSwapElementEventMap {
         "popSwap": SwapChangeEventDetail;
     }
@@ -2000,7 +1987,6 @@ declare global {
         "pop-range": HTMLPopRangeElement;
         "pop-select": HTMLPopSelectElement;
         "pop-select-option": HTMLPopSelectOptionElement;
-        "pop-select-popover": HTMLPopSelectPopoverElement;
         "pop-swap": HTMLPopSwapElement;
         "pop-textarea": HTMLPopTextareaElement;
         "pop-toggle": HTMLPopToggleElement;
@@ -2336,11 +2322,11 @@ declare namespace LocalJSX {
         /**
           * Emitted after the modal has dismissed.
          */
-        "onDidDismiss"?: (event: PopDropdownCustomEvent<void>) => void;
+        "onDismiss"?: (event: PopDropdownCustomEvent<void>) => void;
         /**
           * Emitted after the modal has presented.
          */
-        "onDidPresent"?: (event: PopDropdownCustomEvent<void>) => void;
+        "onPresent"?: (event: PopDropdownCustomEvent<void>) => void;
         /**
           * Force the dropdown to be shown
           * @config 
@@ -3089,6 +3075,10 @@ declare namespace LocalJSX {
           * Only apply when `multiple` property is used. Text that is placed under the select and displayed when the amount of selected option is below of the `min` property.
          */
         "notEnoughErrorText"?: string;
+        /**
+          * Emitted when the overlay is dismissed.
+         */
+        "onDismiss"?: (event: PopSelectCustomEvent<void>) => void;
         /**
           * Emitted when the input loses focus.
          */
@@ -3097,14 +3087,14 @@ declare namespace LocalJSX {
           * The `popChange` event is fired when the user modifies the select's value. Unlike the ionInput event, the `popChange` event is fired when the element loses focus after its value has been modified.
          */
         "onPopChange"?: (event: PopSelectCustomEvent<SelectChangeEventDetail>) => void;
-        /**
-          * Emitted when the overlay is dismissed.
-         */
-        "onPopDismiss"?: (event: PopSelectCustomEvent<void>) => void;
         /**
           * Emitted when the input has focus.
          */
         "onPopFocus"?: (event: PopSelectCustomEvent<void>) => void;
+        /**
+          * Emitted when the overlay is presented.
+         */
+        "onPresent"?: (event: PopSelectCustomEvent<void>) => void;
         /**
           * Instructional text that shows before the input has a value.  This property replace the `<option disabled selected>`
          */
@@ -3152,28 +3142,6 @@ declare namespace LocalJSX {
          */
         "value"?: any | null;
     }
-    interface PopSelectPopover {
-        /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"accent"`, `"info"`, `"success"`, `"warning"`, `"error"`. For more information on colors, see [theming](/docs/theming/basics).
-         */
-        "color"?: Color;
-        /**
-          * If `true`, the select accepts multiple values
-         */
-        "multiple"?: boolean;
-        /**
-          * An array of options for the popover
-         */
-        "options"?: SelectPopoverOption[];
-        /**
-          * If `true`, allow empty on radio options
-         */
-        "required"?: boolean;
-        /**
-          * Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
-         */
-        "size"?: Size;
-    }
     /**
      * Swap allows you to toggle the visibility of two elements.
      */
@@ -3471,7 +3439,6 @@ declare namespace LocalJSX {
         "pop-range": PopRange;
         "pop-select": PopSelect;
         "pop-select-option": PopSelectOption;
-        "pop-select-popover": PopSelectPopover;
         "pop-swap": PopSwap;
         "pop-textarea": PopTextarea;
         "pop-toggle": PopToggle;
@@ -3589,7 +3556,6 @@ declare module "@stencil/core" {
             "pop-range": LocalJSX.PopRange & JSXBase.HTMLAttributes<HTMLPopRangeElement>;
             "pop-select": LocalJSX.PopSelect & JSXBase.HTMLAttributes<HTMLPopSelectElement>;
             "pop-select-option": LocalJSX.PopSelectOption & JSXBase.HTMLAttributes<HTMLPopSelectOptionElement>;
-            "pop-select-popover": LocalJSX.PopSelectPopover & JSXBase.HTMLAttributes<HTMLPopSelectPopoverElement>;
             /**
              * Swap allows you to toggle the visibility of two elements.
              */