From 2f2b4fcba25ff2873f3e66881cff18ff7560bab2 Mon Sep 17 00:00:00 2001 From: Elijah Duffy Date: Mon, 7 Jul 2025 14:10:01 -0700 Subject: [PATCH] add ActionSelect component --- package.json | 2 +- pnpm-lock.yaml | 133 +++++++----------------------------- src/lib/ActionSelect.svelte | 109 +++++++++++++++++++++++++++++ src/lib/Button.svelte | 1 + src/lib/index.ts | 1 + src/routes/+page.svelte | 10 +++ 6 files changed, 148 insertions(+), 108 deletions(-) create mode 100644 src/lib/ActionSelect.svelte diff --git a/package.json b/package.json index 8beb431..7f4c9c9 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "globals": "^16.0.0", "libphonenumber-js": "^1.12.6", "match-sorter": "^8.0.0", - "melt": "^0.12.0", + "melt": "^0.37.0", "moment": "^2.30.1", "phosphor-svelte": "^3.0.1", "prettier": "^3.4.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0dcc8ed..08cf0ae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,9 +30,6 @@ importers: '@sveltejs/adapter-auto': specifier: ^4.0.0 version: 4.0.0(@sveltejs/kit@2.22.2(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1))) - '@sveltejs/package': - specifier: ^2.0.0 - version: 2.3.12(svelte@5.34.9)(typescript@5.8.3) '@sveltejs/vite-plugin-svelte': specifier: ^5.0.0 version: 5.1.0(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1)) @@ -70,8 +67,8 @@ importers: specifier: ^8.0.0 version: 8.0.3 melt: - specifier: ^0.12.0 - version: 0.12.0(@floating-ui/dom@1.7.2)(svelte@5.34.9) + specifier: ^0.37.0 + version: 0.37.0(@floating-ui/dom@1.7.2)(svelte@5.34.9) moment: specifier: ^2.30.1 version: 2.30.1 @@ -87,9 +84,6 @@ importers: prettier-plugin-tailwindcss: specifier: ^0.6.11 version: 0.6.13(prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.34.9))(prettier@3.6.2) - publint: - specifier: ^0.3.2 - version: 0.3.12 svelte: specifier: ^5.0.0 version: 5.34.9 @@ -393,10 +387,6 @@ packages: '@polka/url@1.0.0-next.29': resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==} - '@publint/pack@0.1.2': - resolution: {integrity: sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw==} - engines: {node: '>=18'} - '@rollup/rollup-android-arm-eabi@4.44.1': resolution: {integrity: sha512-JAcBr1+fgqx20m7Fwe1DxPUl/hPkee6jA6Pl7n1v2EFiktAHenTaXl5aIFjUIEsfn9w3HE4gK1lEgNGMzBDs1w==} cpu: [arm] @@ -519,13 +509,6 @@ packages: svelte: ^4.0.0 || ^5.0.0-next.0 vite: ^5.0.3 || ^6.0.0 || ^7.0.0-beta.0 - '@sveltejs/package@2.3.12': - resolution: {integrity: sha512-PUl5aNbk2x28rPdAVTZMtrZmAx6yxQ+s33OtOkE0j0fWtoi9GzENXKRJPHrGk5rwGrczqY0LtNi8dycRPL+yzA==} - engines: {node: ^16.14 || >=18} - hasBin: true - peerDependencies: - svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1 - '@sveltejs/vite-plugin-svelte-inspector@4.0.1': resolution: {integrity: sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==} engines: {node: ^18.0.0 || ^20.0.0 || >=22} @@ -816,9 +799,6 @@ packages: supports-color: optional: true - dedent-js@1.0.1: - resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==} - deep-is@0.1.4: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} @@ -826,6 +806,10 @@ packages: resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} engines: {node: '>=0.10.0'} + dequal@2.0.3: + resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} + engines: {node: '>=6'} + detect-libc@2.0.4: resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==} engines: {node: '>=8'} @@ -960,6 +944,9 @@ packages: flatted@3.3.3: resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==} + focus-trap@7.6.5: + resolution: {integrity: sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==} + fsevents@2.3.3: resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} @@ -1156,20 +1143,17 @@ packages: lodash.merge@4.6.2: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} - lower-case@2.0.2: - resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} - magic-string@0.30.17: resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==} match-sorter@8.0.3: resolution: {integrity: sha512-BnR/YBS1iO94R3EcseKkb7kJ2w2su5CWmywHvFYv70HQ2syqca79JefoGocMK+G1NOdpV2kt0G3uQb5hcdFtIA==} - melt@0.12.0: - resolution: {integrity: sha512-QyaslYNG5hZD0t8Xp9WYc1tpL7yfiU2V2N4QGF/hZpMEtV7+SgBXEFWxeYFRLlBQp+aOzlXUmk8ZpD/7rxo9VA==} + melt@0.37.0: + resolution: {integrity: sha512-D9s3KjrqWo9Ei7u1Q8zhRX0+tMFjSPw8N5pv/k1PW1Scxz84b2gPEPuJU3+jrqtoI4I8256fM5hUaeoPAcQeaw==} peerDependencies: '@floating-ui/dom': ^1.6.0 - svelte: ^5.0.0 + svelte: ^5.30.1 merge2@1.4.1: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} @@ -1222,17 +1206,9 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - nanoid@5.1.5: - resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==} - engines: {node: ^18 || >=20} - hasBin: true - natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} - no-case@3.0.4: - resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} - optionator@0.9.4: resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==} engines: {node: '>= 0.8.0'} @@ -1245,16 +1221,10 @@ packages: resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} engines: {node: '>=10'} - package-manager-detector@1.3.0: - resolution: {integrity: sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==} - parent-module@1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} - pascal-case@3.1.2: - resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==} - path-exists@4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -1389,11 +1359,6 @@ packages: resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} - publint@0.3.12: - resolution: {integrity: sha512-1w3MMtL9iotBjm1mmXtG3Nk06wnq9UhGNRpQ2j6n1Zq7YAD6gnxMMZMIxlRPAydVjVbjSm+n0lhwqsD1m4LD5w==} - engines: {node: '>=18'} - hasBin: true - punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} @@ -1485,16 +1450,13 @@ packages: svelte: optional: true - svelte2tsx@0.7.40: - resolution: {integrity: sha512-Fgqe2lzC9DWT/kQTIXqN39O2ot9rUqzUu9dqpbuI6EsaEJ6+RSXVmXnxcNYMlKb2LRPDoIg9TVzXYWwi0zhCmQ==} - peerDependencies: - svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0 - typescript: ^4.9.4 || ^5.0.0 - svelte@5.34.9: resolution: {integrity: sha512-sld35zFpooaSRSj4qw8Vl/cyyK0/sLQq9qhJ7BGZo/Kd0ggYtEnvNYLlzhhoqYsYQzA0hJqkzt3RBO/8KoTZOg==} engines: {node: '>=18'} + tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} + tailwindcss-animate@1.0.7: resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} peerDependencies: @@ -1529,9 +1491,6 @@ packages: peerDependencies: typescript: '>=4.8.4' - tslib@2.8.1: - resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} - type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} @@ -1829,8 +1788,6 @@ snapshots: '@polka/url@1.0.0-next.29': {} - '@publint/pack@0.1.2': {} - '@rollup/rollup-android-arm-eabi@4.44.1': optional: true @@ -1921,17 +1878,6 @@ snapshots: vite: 6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1) vitefu: 1.0.7(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1)) - '@sveltejs/package@2.3.12(svelte@5.34.9)(typescript@5.8.3)': - dependencies: - chokidar: 4.0.3 - kleur: 4.1.5 - sade: 1.8.1 - semver: 7.7.2 - svelte: 5.34.9 - svelte2tsx: 0.7.40(svelte@5.34.9)(typescript@5.8.3) - transitivePeerDependencies: - - typescript - '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.1.0(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1)))(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1))': dependencies: '@sveltejs/vite-plugin-svelte': 5.1.0(svelte@5.34.9)(vite@6.3.5(@types/node@24.0.9)(jiti@2.4.2)(lightningcss@1.30.1)) @@ -2217,12 +2163,12 @@ snapshots: dependencies: ms: 2.1.3 - dedent-js@1.0.1: {} - deep-is@0.1.4: {} deepmerge@4.3.1: {} + dequal@2.0.3: {} + detect-libc@2.0.4: {} devalue@5.1.1: {} @@ -2407,6 +2353,10 @@ snapshots: flatted@3.3.3: {} + focus-trap@7.6.5: + dependencies: + tabbable: 6.2.0 + fsevents@2.3.3: optional: true @@ -2560,10 +2510,6 @@ snapshots: lodash.merge@4.6.2: {} - lower-case@2.0.2: - dependencies: - tslib: 2.8.1 - magic-string@0.30.17: dependencies: '@jridgewell/sourcemap-codec': 1.5.4 @@ -2573,11 +2519,12 @@ snapshots: '@babel/runtime': 7.27.6 remove-accents: 0.5.0 - melt@0.12.0(@floating-ui/dom@1.7.2)(svelte@5.34.9): + melt@0.37.0(@floating-ui/dom@1.7.2)(svelte@5.34.9): dependencies: '@floating-ui/dom': 1.7.2 + dequal: 2.0.3 + focus-trap: 7.6.5 jest-axe: 9.0.0 - nanoid: 5.1.5 runed: 0.23.4(svelte@5.34.9) svelte: 5.34.9 @@ -2616,15 +2563,8 @@ snapshots: nanoid@3.3.11: {} - nanoid@5.1.5: {} - natural-compare@1.4.0: {} - no-case@3.0.4: - dependencies: - lower-case: 2.0.2 - tslib: 2.8.1 - optionator@0.9.4: dependencies: deep-is: 0.1.4 @@ -2642,17 +2582,10 @@ snapshots: dependencies: p-limit: 3.1.0 - package-manager-detector@1.3.0: {} - parent-module@1.0.1: dependencies: callsites: 3.1.0 - pascal-case@3.1.2: - dependencies: - no-case: 3.0.4 - tslib: 2.8.1 - path-exists@4.0.0: {} path-key@3.1.1: {} @@ -2718,13 +2651,6 @@ snapshots: ansi-styles: 5.2.0 react-is: 18.3.1 - publint@0.3.12: - dependencies: - '@publint/pack': 0.1.2 - package-manager-detector: 1.3.0 - picocolors: 1.1.1 - sade: 1.8.1 - punycode@2.3.1: {} queue-microtask@1.2.3: {} @@ -2825,13 +2751,6 @@ snapshots: optionalDependencies: svelte: 5.34.9 - svelte2tsx@0.7.40(svelte@5.34.9)(typescript@5.8.3): - dependencies: - dedent-js: 1.0.1 - pascal-case: 3.1.2 - svelte: 5.34.9 - typescript: 5.8.3 - svelte@5.34.9: dependencies: '@ampproject/remapping': 2.3.0 @@ -2849,6 +2768,8 @@ snapshots: magic-string: 0.30.17 zimmerframe: 1.1.2 + tabbable@6.2.0: {} + tailwindcss-animate@1.0.7(tailwindcss@4.1.11): dependencies: tailwindcss: 4.1.11 @@ -2881,8 +2802,6 @@ snapshots: dependencies: typescript: 5.8.3 - tslib@2.8.1: {} - type-check@0.4.0: dependencies: prelude-ls: 1.2.1 diff --git a/src/lib/ActionSelect.svelte b/src/lib/ActionSelect.svelte new file mode 100644 index 0000000..13c0e0f --- /dev/null +++ b/src/lib/ActionSelect.svelte @@ -0,0 +1,109 @@ + + + + +
+ {#if label} + + {/if} + + + +
+ {#each options as option} + + {/each} +
+
+ +{#snippet title(opt: ButtonSelectOption)} + {#if typeof opt.title === 'string'} + {opt.title} + {:else} + {@render opt.title(opt)} + {/if} +{/snippet} + +{#snippet icon(opt: ButtonSelectOption)} + {#if opt.icon && typeof opt.icon === 'object'} + + {:else if opt.icon} + {@render opt.icon(opt)} + {/if} +{/snippet} diff --git a/src/lib/Button.svelte b/src/lib/Button.svelte index 041f8bc..6bd2d01 100644 --- a/src/lib/Button.svelte +++ b/src/lib/Button.svelte @@ -144,5 +144,6 @@ background-color: rgba(255, 255, 255, 0.3); animation: ripple 0.5s linear; transform: scale(0); + pointer-events: none; } diff --git a/src/lib/index.ts b/src/lib/index.ts index 433bcea..727d9b8 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,4 +1,5 @@ // Reexport your entry components here +export { default as ActionSelect } from './ActionSelect.svelte'; export { default as Button } from './Button.svelte'; export { default as CenterBox } from './CenterBox.svelte'; export { default as Checkbox, type CheckboxState } from './Checkbox.svelte'; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 23c488a..9aa049c 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,5 +1,6 @@