fix(select): refacto the select

- select popover display rework to avoid framework delegate

fixes: #63

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": {

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
@@ -366,18 +367,21 @@ pop-select,prop,multiple,boolean,undefined,false,true
 pop-select,prop,name,string,this.inputId,false,true
 pop-select,prop,notEnoughErrorText,string,undefined,false,false
 pop-select,prop,placeholder,string,undefined,false,false
+pop-select,prop,readonly,boolean,undefined,false,true
 pop-select,prop,required,boolean,undefined,false,true
 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

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 : {}),
+  });
+}

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"
   }
 }

packages/core/src/components-config.d.ts

@@ -654,7 +654,7 @@ export namespace Configuration {
     };
     'pop-select'?: {
       /**
-       * If `true`, the user can enter more than one value.
+       * If `true`, the user can select more than one value.
        * @default false
        */
       multiple?: boolean;
@@ -673,13 +673,18 @@ export namespace Configuration {
        * @default false
        */
       required?: boolean;
+      /**
+       * If `true`, the user cannot modify the value.
+       * @default false
+       */
+      readonly?: boolean;
       /**
        * If `true`, the user cannot interact with the element.
        * @default false
        */
       disabled?: boolean;
       /**
-       * if `true`, adds border to textarea when `color` property is not set.
+       * if `true`, adds border to select when `color` property is not set.
        * @default false
        */
       bordered?: boolean;