svelte-headless-components - npm Package Compare versions

Comparing version 0.0.13 to 1.0.0

dist/components/popover/popover.d.ts

@@ -5,3 +5,2 @@ import { type ComputeConfig, type ContentAction, type ReferenceAction, type UpdatePosition } from 'svelte-floating-ui';
 export type FloatingUiNode = HTMLElement | Writable<VirtualElement> | VirtualElement;
-export declare function isElementInPopover(srcElement: EventTarget | null): boolean;
 export declare function defaultVirtualPosition(): {
@@ -8,0 +7,0 @@ getBoundingClientRect: () => {

dist/components/popover/popover.js

@@ -6,7 +6,2 @@ import { BROWSER } from 'esm-env';
 import { getBackdropNode, hideBackdrop, showBackdrop } from './backdrop.js';
-export function isElementInPopover(srcElement) {
-    if (!srcElement)
-        return false;
-    return !!srcElement.closest('[data-popover-id]');
-}
 export function defaultVirtualPosition() {
@@ -13,0 +8,0 @@ return {

dist/components/select/select.d.ts

@@ -10,2 +10,3 @@ import type { ComputeConfig } from 'svelte-floating-ui';
     data?: Record<string, any>;
+    disabled: boolean;
 };
@@ -47,3 +48,3 @@ export type OptionSelect = OptionBase & {
 export type WritableElement = Writable<HTMLElement | null>;
-export type WritableOptions = [Writable<HTMLElement[]>, string];
+export type WritableOptions = [Writable<HTMLElement[]>, OptionItem];
 export declare const element: Action<HTMLElement, WritableElement | WritableOptions>;
@@ -50,0 +51,0 @@ export declare class Select {

dist/components/select/select.js

@@ -7,4 +7,10 @@ import { BROWSER } from 'esm-env';
     if (Array.isArray(input)) {
-        const [writableOptions, optionId] = input;
-        node.dataset.id = optionId;
+        const [writableOptions, option] = input;
+        node.dataset.id = option.id;
+        if (option.disabled) {
+            node.dataset.disabled = 'true';
+            if (allowDisabledAttribute(node)) {
+                node.disabled = true;
+            }
+        }
         writableOptions.set([...get(writableOptions), node]);
@@ -148,2 +154,5 @@ return {
         }
+        if (option.disabled) {
+            return null;
+        }
         const previousSelected = option.selected ? true : false;
@@ -410,10 +419,8 @@ if (!option.isMulti) {
                 const withDefaults = {
-                    ...{
-                        type: 'select',
-                        id: input.label,
-                        selected: false,
-                        active: false,
-                        parent: parent ?? null,
-                        isMulti: false,
-                    },
+                    id: input.label,
+                    selected: false,
+                    active: false,
+                    parent: parent ?? null,
+                    isMulti: false,
+                    disabled: parent?.disabled ?? false,
                     ...input,
@@ -431,2 +438,3 @@ };
                         subOptions: [],
+                        disabled: parent?.disabled ?? false,
                     },
@@ -453,2 +461,3 @@ ...input,
                     isMulti: false,
+                    disabled: false,
                     type: 'select',
@@ -559,1 +568,10 @@ });
 }
+function allowDisabledAttribute(node) {
+    return (node instanceof HTMLButtonElement ||
+        node instanceof HTMLFieldSetElement ||
+        node instanceof HTMLOptGroupElement ||
+        node instanceof HTMLOptionElement ||
+        node instanceof HTMLSelectElement ||
+        node instanceof HTMLTextAreaElement ||
+        node instanceof HTMLInputElement);
+}

dist/demo/select/code.d.ts

@@ -1,1 +0,1 @@
-export declare const code = "<script lang=\"ts\">\nimport { Select, element } from 'svelte-headless-components';\n\nconst {\n  state: { isOpen, selected, filteredOptions },\n  elements: { options, trigger, content },\n} = new Select([{ label: '\u26AB\uFE0F Backlog' }, { label: '\uD83D\uDD35 In progress' }, { label: '\uD83D\uDFE2 Done' }]);\n</script>\n\n<button\nuse:element={trigger}\nclass=\"w-fit border {$isOpen\n  ? 'border-slate-500'\n  : 'border-slate-300'} flex items-center gap-2 focus:outline-none focus:border-sky-600 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 class=\"flex flex-col divide-y bg-white border border-slate-300 rounded shadow-md pb-1\" use:element={content}>\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";
+export declare const code = "<script lang=\"ts\">\nimport { Select, element } from 'svelte-headless-components';\n\nconst {\n  state: { isOpen, selected, filteredOptions },\n  elements: { options, trigger, content },\n} = new Select([{ label: '\u26AB\uFE0F Backlog' }, { label: '\uD83D\uDD35 In progress' }, { label: '\uD83D\uDFE2 Done' }]);\n</script>\n\n<button\nuse:element={trigger}\nclass=\"w-fit border {$isOpen\n  ? 'border-slate-500'\n  : 'border-slate-300'} flex items-center gap-2 focus:outline-none focus:border-sky-600 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 class=\"flex flex-col divide-y bg-white border border-slate-300 rounded shadow-md pb-1\" use:element={content}>\n  <div class=\"flex flex-col\">\n    {#each $filteredOptions as option}\n      <button\n        use:element={[options, option]}\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

@@ -24,3 +24,3 @@ export const code = `<script lang="ts">
       <button
-        use:element={[options, option.id]}
+        use:element={[options, option]}
         class="flex px-3 py-1 {option.active ? 'bg-slate-100 text-slate-950' : 'text-slate-500'}"
@@ -27,0 +27,0 @@ >

package.json

 {
   "name": "svelte-headless-components",
-  "version": "0.0.13",
+  "version": "1.0.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "keywords": [

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48577

increased by1.01%

Lines of code

1034

increased by1.27%

Number of low quality alerts

1

decreased by-50%

No dependency changes