@nova-design-system/nova-webcomponents 3.0.0-beta.17

package/dist/collection/components/nv-popover/nv-popover.docs.js

@@ -0,0 +1,74 @@
+import { h } from "@stencil/core";
+import { nameof } from "../../utils/class.utils";
+const NvPopoverDocs = {
+    component: 'nv-popover',
+    subcomponents: ['nv-button'],
+    stories: [
+        {
+            name: 'Default',
+            template: (h("nv-popover", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a popover."))),
+        },
+        {
+            name: nameof(x => x.open),
+            args: { open: true },
+            template: (h("nv-popover", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a pre opened popover."))),
+        },
+        {
+            name: nameof(x => x.triggerMode),
+            template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, "trigger-mode": "hover", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Hover Me"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, "trigger-mode": "click", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Click Me"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, "trigger-mode": "controlled", open: true, placement: "top", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Controlled"), h("p", { slot: "content" }, "This is a controlled popover.")))),
+        },
+        {
+            name: nameof(x => x.placement),
+            args: {
+                hasArrow: true,
+            },
+            template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, placement: "top", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Top"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, placement: "bottom", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Bottom"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, placement: "left", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Left"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, placement: "right", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Right"), h("p", { slot: "content" }, "This is a popover.")))),
+        },
+        {
+            name: nameof(x => x.groupName),
+            args: {
+                groupName: 'popover-group-1',
+            },
+            template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Popover 1"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Popover 2"), h("p", { slot: "content" }, "This is a popover.")), h("nv-popover", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Popover 3"), h("p", { slot: "content" }, "This is a popover.")))),
+        },
+        {
+            name: nameof(x => x.offset),
+            args: {
+                offset: 30,
+                placement: 'right',
+            },
+            template: (h("nv-popover", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Offset"), h("p", { slot: "content" }, "This is a popover with 30px offset."))),
+        },
+        {
+            name: nameof(x => x.hasArrow),
+            args: {
+                hasArrow: true,
+            },
+            template: (h("nv-popover", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Arrow"), h("p", { slot: "content" }, "This is a popover with an arrow."))),
+        },
+        {
+            name: nameof(x => x.disableFlip),
+            args: {
+                open: true,
+            },
+            template: (h("div", { "data-class": "flex gap-4 items-start" }, h("nv-popover", { "data-storybook-args": true, "disable-flip": true, placement: "bottom", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Flip Off Placement Bottom"), h("p", { slot: "content" }, "This will always stay to the bottom.")), h("nv-popover", { "data-storybook-args": true, placement: "top", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Flip On Placement Top"), h("p", { slot: "content" }, "This could flip to the bottom.")), h("nv-popover", { "data-storybook-args": true, placement: "bottom", "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Flip On Placement Bottom"), h("p", { slot: "content" }, "This could flip to the top.")))),
+        },
+        {
+            name: nameof(x => x.shiftPadding),
+            args: {
+                shiftPadding: 40,
+            },
+            template: (h("nv-popover", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Shift Padding"), h("p", { slot: "content" }, "This is a popover with 40px padding."))),
+        },
+        {
+            name: nameof(x => x.enterDelay),
+            args: {
+                enterDelay: 1000,
+                triggerMode: 'hover',
+            },
+            template: (h("nv-popover", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", { slot: "trigger" }, "Hover me and wait 1s"), h("p", { slot: "content" }, "This is a popover with a 1s enter delay."))),
+        },
+    ],
+};
+export default NvPopoverDocs;
+//# sourceMappingURL=nv-popover.docs.js.map

package/dist/collection/components/nv-popover/nv-popover.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-popover.docs.js","sourceRoot":"","sources":["../../../src/components/nv-popover/nv-popover.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvPopoverDocs: NovaDocs<Components.NvPopover> = {\n  component: 'nv-popover',\n  subcomponents: ['nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      template: (\n        <nv-popover data-storybook-args data-class=\"py-6\">\n          <nv-button slot=\"trigger\">Click Me</nv-button>\n          <p slot=\"content\">This is a popover.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.open),\n      args: { open: true },\n      template: (\n        <nv-popover data-storybook-args data-class=\"py-6\">\n          <nv-button slot=\"trigger\">Click Me</nv-button>\n          <p slot=\"content\">This is a pre opened popover.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.triggerMode),\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover\n            data-storybook-args\n            trigger-mode=\"hover\"\n            data-class=\"py-6\"\n          >\n            <nv-button slot=\"trigger\">Hover Me</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover\n            data-storybook-args\n            trigger-mode=\"click\"\n            data-class=\"py-6\"\n          >\n            <nv-button slot=\"trigger\">Click Me</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover\n            data-storybook-args\n            trigger-mode=\"controlled\"\n            open\n            placement=\"top\"\n            data-class=\"py-6\"\n          >\n            <nv-button slot=\"trigger\">Controlled</nv-button>\n            <p slot=\"content\">This is a controlled popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.placement),\n      args: {\n        hasArrow: true,\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Top</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"bottom\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Bottom</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"left\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Left</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"right\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Right</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.groupName),\n      args: {\n        groupName: 'popover-group-1',\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover data-storybook-args data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Popover 1</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Popover 2</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Popover 3</nv-button>\n            <p slot=\"content\">This is a popover.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.offset),\n      args: {\n        offset: 30,\n        placement: 'right',\n      },\n      template: (\n        <nv-popover data-storybook-args data-class=\"py-6\">\n          <nv-button slot=\"trigger\">Offset</nv-button>\n          <p slot=\"content\">This is a popover with 30px offset.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.hasArrow),\n      args: {\n        hasArrow: true,\n      },\n      template: (\n        <nv-popover data-storybook-args data-class=\"py-6\">\n          <nv-button slot=\"trigger\">Arrow</nv-button>\n          <p slot=\"content\">This is a popover with an arrow.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.disableFlip),\n      args: {\n        open: true,\n      },\n      template: (\n        <div data-class=\"flex gap-4 items-start\">\n          <nv-popover\n            data-storybook-args\n            disable-flip\n            placement=\"bottom\"\n            data-class=\"py-6\"\n          >\n            <nv-button slot=\"trigger\">Flip Off Placement Bottom</nv-button>\n            <p slot=\"content\">This will always stay to the bottom.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"top\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Flip On Placement Top</nv-button>\n            <p slot=\"content\">This could flip to the bottom.</p>\n          </nv-popover>\n          <nv-popover data-storybook-args placement=\"bottom\" data-class=\"py-6\">\n            <nv-button slot=\"trigger\">Flip On Placement Bottom</nv-button>\n            <p slot=\"content\">This could flip to the top.</p>\n          </nv-popover>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.shiftPadding),\n      args: {\n        shiftPadding: 40,\n      },\n      template: (\n        <nv-popover data-storybook-args data-class=\"py-6\">\n          <nv-button slot=\"trigger\">Shift Padding</nv-button>\n          <p slot=\"content\">This is a popover with 40px padding.</p>\n        </nv-popover>\n      ),\n    },\n    {\n      name: nameof<Components.NvPopover>(x => x.enterDelay),\n      args: {\n        enterDelay: 1000,\n        triggerMode: 'hover',\n      },\n      template: (\n        <nv-popover data-storybook-args data-class=\"py-6\">\n          <nv-button slot=\"trigger\">Hover me and wait 1s</nv-button>\n          <p slot=\"content\">This is a popover with a 1s enter delay.</p>\n        </nv-popover>\n      ),\n    },\n  ],\n};\n\nexport default NvPopoverDocs;\n"]}