svelte-headless-components - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/components/select/select.js

@@ -404,5 +404,2 @@ import { browser } from '$app/environment';
             case 'menu':
-                if (input.subOptions === undefined) {
-                    throw new Error('subOptions is required for menu type');
-                }
                 const menuOption = {
@@ -409,0 +406,0 @@ ...{

dist/demo/select/code.d.ts

@@ -1,1 +0,1 @@
-export declare const code = "<script lang=\"ts\">\nimport { Select, element } from '../../components/select/select.js';\nimport { offset } from '@floating-ui/core';\nimport { createFloatingActions } from 'svelte-floating-ui';\n\nconst [floatingRef, floatingContent] = createFloatingActions({\n  strategy: 'absolute',\n  placement: 'bottom-start',\n  middleware: [offset(4)],\n});\n\nconst select = new Select([\n  { label: '\u26AB\uFE0F Backlog' },\n  { label: '\uD83D\uDD35 In progress' },\n  { label: '\uD83D\uDFE2 Done' }]);\nconst {\n  state: { isOpen, selected, filteredOptions },\n  elements: { trigger, content, options },\n} = select;\n</script>\n\n<div class=\"w-fit\">\n<button\n  use:floatingRef\n  use:element={trigger}\n  class=\"border {$isOpen\n    ? 'border-slate-500'\n    : 'border-slate-300'} flex items-center gap-2 focus:outline-none focus:border-sky-600 hover:border hover:border-slate-400 rounded-md px-2 py-1\"\n>\n  {#if $selected.length === 0}\n    <span class=\"text-slate-500\">Nothing selected</span>\n  {:else}\n    <span class=\"text-slate-900\">{$selected[0].label}</span>\n  {/if}\n</button>\n\n{#if $isOpen}\n  <div\n    class=\"flex flex-col divide-y bg-white border border-slate-300 rounded shadow-md pb-1\"\n    use:floatingContent\n    use:element={content}\n  >\n    <div class=\"flex flex-col\">\n      {#each $filteredOptions as option}\n        <button\n          use:element={[options, option.id]}\n          class=\"flex px-3 py-1 {option.active ? 'bg-slate-100 text-slate-950' : 'text-slate-500'}\"\n        >\n          {option.label}\n        </button>\n      {/each}\n    </div>\n  </div>\n{/if}\n</div>\n";
+export declare const code = "<script lang=\"ts\">\nimport { Select, element } from '../../components/select/select.js';\nimport { offset } from '@floating-ui/core';\nimport { createFloatingActions } from 'svelte-floating-ui';\n\nconst [floatingRef, floatingContent] = createFloatingActions({\n  strategy: 'absolute',\n  placement: 'bottom-start',\n  middleware: [offset(4)],\n});\n\nconst {\n  state: { isOpen, selected, filteredOptions },\n  elements: { trigger, content, options },\n} = new Select([\n  { label: '\u26AB\uFE0F Backlog' },\n  { label: '\uD83D\uDD35 In progress' },\n  { label: '\uD83D\uDFE2 Done' }\n]);\n</script>\n\n<button\n  use:floatingRef\n  use:element={trigger}\n  class=\"w-fit border {$isOpen\n    ? 'border-slate-500'\n    : 'border-slate-300'} flex items-center gap-2 focus:outline-none focus:border-sky-600 hover:border hover:border-slate-400 rounded-md px-2 py-1\"\n>\n  <span class=\"text-slate-600\">{$selected.length > 0 ? $selected[0].label : 'Nothing selected'}</span>\n</button>\n\n{#if $isOpen}\n  <div\n    class=\"flex flex-col divide-y bg-white border border-slate-300 rounded shadow-md pb-1\"\n    use:floatingContent\n    use:element={content}\n  >\n    <div class=\"flex flex-col\">\n      {#each $filteredOptions as option}\n        <button\n          use:element={[options, option.id]}\n          class=\"flex px-3 py-1 {option.active ? 'bg-slate-100 text-slate-950' : 'text-slate-500'}\"\n        >\n          {option.label}\n        </button>\n      {/each}\n    </div>\n  </div>\n{/if}\n";

dist/demo/select/code.js

@@ -12,25 +12,20 @@ export const code = `<script lang="ts">
 
-const select = new Select([
-  { label: '⚫️ Backlog' },
-  { label: '🔵 In progress' },
-  { label: '🟢 Done' }]);
 const {
   state: { isOpen, selected, filteredOptions },
   elements: { trigger, content, options },
-} = select;
+} = new Select([
+  { label: '⚫️ Backlog' },
+  { label: '🔵 In progress' },
+  { label: '🟢 Done' }
+]);
 </script>
 
-<div class="w-fit">
 <button
   use:floatingRef
   use:element={trigger}
-  class="border {$isOpen
+  class="w-fit border {$isOpen
     ? 'border-slate-500'
     : 'border-slate-300'} flex items-center gap-2 focus:outline-none focus:border-sky-600 hover:border hover:border-slate-400 rounded-md px-2 py-1"
 >
-  {#if $selected.length === 0}
-    <span class="text-slate-500">Nothing selected</span>
-  {:else}
-    <span class="text-slate-900">{$selected[0].label}</span>
-  {/if}
+  <span class="text-slate-600">{$selected.length > 0 ? $selected[0].label : 'Nothing selected'}</span>
 </button>
@@ -56,3 +51,2 @@
 {/if}
-</div>
 `;

dist/demo/select/Item.svelte.d.ts

@@ -6,3 +6,3 @@ import { SvelteComponent } from "svelte";
         option: OptionItem;
-        kind?: "search" | "option" | "add" | undefined;
+        kind?: "option" | "search" | "add" | undefined;
         search?: string | undefined;
@@ -9,0 +9,0 @@ };

dist/demo/utils.d.ts

@@ -1,4 +0,1 @@
-export declare function clickOutside(node: HTMLElement, handler: () => void): {
-    destroy: () => void;
-};
 export declare function focusElement(node: HTMLElement): void;

dist/demo/utils.js

@@ -1,10 +0,1 @@
-export function clickOutside(node, handler) {
-    const onClick = (event) => node && !node.contains(event.target) && !event.defaultPrevented && handler();
-    document.addEventListener('click', onClick, true);
-    return {
-        destroy() {
-            document.removeEventListener('click', onClick, true);
-        },
-    };
-}
 export function focusElement(node) {
@@ -11,0 +2,0 @@ if (node) {

package.json

 {
   "name": "svelte-headless-components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "license": "MIT",
@@ -73,3 +73,6 @@ "keywords": [
   "types": "./dist/index.d.ts",
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "@paralleldrive/cuid2": "^2.2.2"
+  }
 }

No alert changes

Improved metrics

Total package byte prevSize

43097

increased by5.15%

Number of package files

23

increased by9.52%

Lines of code

860

increased by7.77%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@paralleldrive/cuid2@^2.2.2

• + Added@noble/hashes@1.7.1(transitive)

• + Added@paralleldrive/cuid2@2.2.2(transitive)