@plasmicpkgs/plasmic-nav 0.0.178 → 0.0.180
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -67,7 +67,6 @@ function minifyCss(input) {
|
|
|
67
67
|
return input.replace(/\s{2,}|\n/g, "") // Remove spaces
|
|
68
68
|
.replace(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/g, ""); // Remove comments.
|
|
69
69
|
}
|
|
70
|
-
|
|
71
70
|
var navigationBarComponentMeta = {
|
|
72
71
|
name: "hostless-plasmic-navigation-bar",
|
|
73
72
|
displayName: "Navigation Bar",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plasmic-nav.cjs.development.js","sources":["../src/PlasmicNavigationBar.tsx"],"sourcesContent":["import { ComponentMeta, PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n CanvasComponentProps,\n} from \"@plasmicapp/host/registerComponent\";\nimport React from \"react\";\n\ninterface Props extends CanvasComponentProps {\n brand?: React.ReactNode;\n menuItems?: React.ReactNode;\n className?: string;\n closeButton?: React.ReactNode;\n openButton?: React.ReactNode;\n forceOpenMenu?: boolean;\n itemsGap?: number;\n responsiveBreakpoint?: number;\n}\n\nconst CSSClasses = {\n container: \"plasmic-nav-container\",\n menuButton: \"plasmic-nav-menu-button\",\n menuItemsContainer: \"plasmic-nav-menu-items\",\n menuItemsContainerOpen: \"plasmic-nav-menu-items-open\",\n};\n\nconst DEFAULT_GAP = 8;\nconst DEFAULT_RESPONSIVE_BREAKPOINT = 768;\nexport function NavigationBar(props: Props) {\n const { forceOpenMenu } = props;\n const [isOpen, setIsOpen] = React.useState(false);\n const inEditor = React.useContext(PlasmicCanvasContext);\n\n const shouldRenderMenu = React.useMemo(() => {\n if (inEditor && forceOpenMenu) {\n return true;\n }\n\n return isOpen;\n }, [inEditor, forceOpenMenu, isOpen]);\n\n const toggleMenu = () => setIsOpen((value) => !value);\n\n // Parsing the gap manually to ensure it's a valid number\n // as we are using it in dangerouslySetInnerHTML.\n const gap = safeParseNumber(props.itemsGap, DEFAULT_GAP);\n const responsiveBreakpoint = safeParseNumber(\n props.responsiveBreakpoint,\n DEFAULT_RESPONSIVE_BREAKPOINT\n );\n\n const cssStyles = React.useMemo(\n () =>\n minifyCss(`\n /* Shared Styles */\n .${CSSClasses.container} {\n box-sizing: border-box;\n }\n\n .${CSSClasses.menuItemsContainer} {\n box-sizing: border-box;\n display: flex;\n }\n\n .${CSSClasses.menuItemsContainer} > * {\n flex: 0 0 auto;\n }\n\n /* Desktop Styles */\n @media (min-width: ${responsiveBreakpoint + 1}px) {\n .${CSSClasses.menuButton} {\n display: none;\n }\n\n .${CSSClasses.menuItemsContainer} {\n flex-direction: row;\n align-items: center;\n width: auto;\n }\n .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n margin-inline-start: ${gap}px;\n }\n }\n\n /* Mobile Styles */\n @media (max-width: ${responsiveBreakpoint}px) {\n .${CSSClasses.menuButton} {\n unset: all;\n -webkit-appearance: none;\n min-width: 40px;\n min-height: 40px;\n padding: 0;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n cursor: pointer;\n }\n\n .${CSSClasses.menuItemsContainer}:not(.${\n CSSClasses.menuItemsContainerOpen\n }) {\n display: none;\n }\n\n .${CSSClasses.menuItemsContainer} {\n margin-top: 10px;\n flex-direction: column;\n flex-shrink: 0;\n width: 100%;\n }\n .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n margin-top: ${gap}px;\n }\n }\n `),\n [gap, responsiveBreakpoint]\n );\n\n return (\n <div className={`${CSSClasses.container} ${props.className}`}>\n <style dangerouslySetInnerHTML={{ __html: cssStyles }} />\n <div>{props.brand}</div>\n <button\n className={CSSClasses.menuButton}\n onClick={toggleMenu}\n tabIndex={0}\n aria-expanded={shouldRenderMenu}\n >\n {shouldRenderMenu ? props.closeButton : props.openButton}\n </button>\n <nav\n role=\"menu\"\n className={`${CSSClasses.menuItemsContainer} ${\n shouldRenderMenu ? CSSClasses.menuItemsContainerOpen : \"\"\n }`.trim()}\n >\n {props.menuItems}\n </nav>\n </div>\n );\n}\n\nfunction safeParseNumber(input: any, defaultValue: number = 0) {\n const parsedValue = parseInt(input, 10);\n return isNaN(parsedValue) ? defaultValue : parsedValue;\n}\n\nfunction minifyCss(input: string) {\n return input\n .replace(/\\s{2,}|\\n/g, \"\") // Remove spaces\n .replace(/\\/\\*[\\s\\S]*?\\*\\/|([^:]|^)\\/\\/.*$/g, \"\"); // Remove comments.\n}\n\nexport const navigationBarComponentMeta: ComponentMeta<Props> = {\n name: `hostless-plasmic-navigation-bar`,\n displayName: \"Navigation Bar\",\n importName: \"NavigationBar\",\n importPath: \"@plasmicpkgs/plasmic-nav\",\n props: {\n // Properties\n forceOpenMenu: {\n displayName: \"Force Open Menu\",\n description:\n \"Use this option to open the menu during design time so you can easily customize the close button and menu items for small screens. This option is ignored when publishing the page.\",\n type: \"boolean\",\n },\n itemsGap: {\n displayName: \"Items Gap\",\n description: \"The width of the space between menu items in pixels.\",\n type: \"number\",\n min: 0,\n defaultValue: DEFAULT_GAP,\n },\n responsiveBreakpoint: {\n displayName: \"Small Screens Breakpoint\",\n description:\n \"The maximum screen width used for showing the small screens version of the menu.\",\n type: \"number\",\n min: 0,\n defaultValue: DEFAULT_RESPONSIVE_BREAKPOINT,\n },\n\n // Slots\n brand: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"hbox\",\n tag: \"a\",\n attrs: { href: \"#\" },\n styles: { padding: \"0px\" },\n children: {\n type: \"img\",\n src: \"https://static1.plasmic.app/nav-logo-placeholder.svg\",\n styles: { height: \"40px\" },\n },\n },\n ],\n },\n openButton: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://static1.plasmic.app/menu.svg\",\n },\n },\n closeButton: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://static1.plasmic.app/close.svg\",\n },\n },\n menuItems: {\n type: \"slot\",\n defaultValue: [\"Home\", \"About\", \"Contact\"].map((title) => ({\n type: \"text\",\n tag: \"a\",\n attrs: { href: \"/\" },\n styles: { width: \"auto\" },\n value: title,\n })),\n },\n },\n defaultStyles: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n width: \"100%\",\n padding: \"16px\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n marginBottom: \"20px\",\n },\n};\n\nexport function registerNavigationBar(\n loader?: { registerComponent: typeof registerComponent },\n customMetaProps?: ComponentMeta<React.ComponentProps<typeof NavigationBar>>\n) {\n if (loader) {\n loader.registerComponent(\n NavigationBar,\n customMetaProps ?? navigationBarComponentMeta\n );\n } else {\n registerComponent(\n NavigationBar,\n customMetaProps ?? navigationBarComponentMeta\n );\n }\n}\n"],"names":["CSSClasses","container","menuButton","menuItemsContainer","menuItemsContainerOpen","DEFAULT_GAP","DEFAULT_RESPONSIVE_BREAKPOINT","NavigationBar","props","forceOpenMenu","_React$useState","React","useState","isOpen","setIsOpen","inEditor","useContext","PlasmicCanvasContext","shouldRenderMenu","useMemo","toggleMenu","value","gap","safeParseNumber","itemsGap","responsiveBreakpoint","cssStyles","minifyCss","className","dangerouslySetInnerHTML","__html","brand","onClick","tabIndex","closeButton","openButton","role","trim","menuItems","input","defaultValue","parsedValue","parseInt","isNaN","replace","navigationBarComponentMeta","name","displayName","importName","importPath","description","type","min","tag","attrs","href","styles","padding","children","src","height","map","title","width","defaultStyles","display","flexDirection","justifyContent","flexWrap","alignItems","marginBottom","registerNavigationBar","loader","customMetaProps","registerComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"plasmic-nav.cjs.development.js","sources":["../src/PlasmicNavigationBar.tsx"],"sourcesContent":["import { ComponentMeta, PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n CanvasComponentProps,\n} from \"@plasmicapp/host/registerComponent\";\nimport React from \"react\";\n\ninterface Props extends CanvasComponentProps {\n brand?: React.ReactNode;\n menuItems?: React.ReactNode;\n className?: string;\n closeButton?: React.ReactNode;\n openButton?: React.ReactNode;\n forceOpenMenu?: boolean;\n itemsGap?: number;\n responsiveBreakpoint?: number;\n}\n\nconst CSSClasses = {\n container: \"plasmic-nav-container\",\n menuButton: \"plasmic-nav-menu-button\",\n menuItemsContainer: \"plasmic-nav-menu-items\",\n menuItemsContainerOpen: \"plasmic-nav-menu-items-open\",\n};\n\nconst DEFAULT_GAP = 8;\nconst DEFAULT_RESPONSIVE_BREAKPOINT = 768;\nexport function NavigationBar(props: Props) {\n const { forceOpenMenu } = props;\n const [isOpen, setIsOpen] = React.useState(false);\n const inEditor = React.useContext(PlasmicCanvasContext);\n\n const shouldRenderMenu = React.useMemo(() => {\n if (inEditor && forceOpenMenu) {\n return true;\n }\n\n return isOpen;\n }, [inEditor, forceOpenMenu, isOpen]);\n\n const toggleMenu = () => setIsOpen((value) => !value);\n\n // Parsing the gap manually to ensure it's a valid number\n // as we are using it in dangerouslySetInnerHTML.\n const gap = safeParseNumber(props.itemsGap, DEFAULT_GAP);\n const responsiveBreakpoint = safeParseNumber(\n props.responsiveBreakpoint,\n DEFAULT_RESPONSIVE_BREAKPOINT\n );\n\n const cssStyles = React.useMemo(\n () =>\n minifyCss(`\n /* Shared Styles */\n .${CSSClasses.container} {\n box-sizing: border-box;\n }\n\n .${CSSClasses.menuItemsContainer} {\n box-sizing: border-box;\n display: flex;\n }\n\n .${CSSClasses.menuItemsContainer} > * {\n flex: 0 0 auto;\n }\n\n /* Desktop Styles */\n @media (min-width: ${responsiveBreakpoint + 1}px) {\n .${CSSClasses.menuButton} {\n display: none;\n }\n\n .${CSSClasses.menuItemsContainer} {\n flex-direction: row;\n align-items: center;\n width: auto;\n }\n .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n margin-inline-start: ${gap}px;\n }\n }\n\n /* Mobile Styles */\n @media (max-width: ${responsiveBreakpoint}px) {\n .${CSSClasses.menuButton} {\n unset: all;\n -webkit-appearance: none;\n min-width: 40px;\n min-height: 40px;\n padding: 0;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n cursor: pointer;\n }\n\n .${CSSClasses.menuItemsContainer}:not(.${\n CSSClasses.menuItemsContainerOpen\n }) {\n display: none;\n }\n\n .${CSSClasses.menuItemsContainer} {\n margin-top: 10px;\n flex-direction: column;\n flex-shrink: 0;\n width: 100%;\n }\n .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n margin-top: ${gap}px;\n }\n }\n `),\n [gap, responsiveBreakpoint]\n );\n\n return (\n <div className={`${CSSClasses.container} ${props.className}`}>\n <style dangerouslySetInnerHTML={{ __html: cssStyles }} />\n <div>{props.brand}</div>\n <button\n className={CSSClasses.menuButton}\n onClick={toggleMenu}\n tabIndex={0}\n aria-expanded={shouldRenderMenu}\n >\n {shouldRenderMenu ? props.closeButton : props.openButton}\n </button>\n <nav\n role=\"menu\"\n className={`${CSSClasses.menuItemsContainer} ${\n shouldRenderMenu ? CSSClasses.menuItemsContainerOpen : \"\"\n }`.trim()}\n >\n {props.menuItems}\n </nav>\n </div>\n );\n}\n\nfunction safeParseNumber(input: any, defaultValue: number = 0) {\n const parsedValue = parseInt(input, 10);\n return isNaN(parsedValue) ? defaultValue : parsedValue;\n}\n\nfunction minifyCss(input: string) {\n return input\n .replace(/\\s{2,}|\\n/g, \"\") // Remove spaces\n .replace(/\\/\\*[\\s\\S]*?\\*\\/|([^:]|^)\\/\\/.*$/g, \"\"); // Remove comments.\n}\n\nexport const navigationBarComponentMeta: ComponentMeta<Props> = {\n name: `hostless-plasmic-navigation-bar`,\n displayName: \"Navigation Bar\",\n importName: \"NavigationBar\",\n importPath: \"@plasmicpkgs/plasmic-nav\",\n props: {\n // Properties\n forceOpenMenu: {\n displayName: \"Force Open Menu\",\n description:\n \"Use this option to open the menu during design time so you can easily customize the close button and menu items for small screens. This option is ignored when publishing the page.\",\n type: \"boolean\",\n },\n itemsGap: {\n displayName: \"Items Gap\",\n description: \"The width of the space between menu items in pixels.\",\n type: \"number\",\n min: 0,\n defaultValue: DEFAULT_GAP,\n },\n responsiveBreakpoint: {\n displayName: \"Small Screens Breakpoint\",\n description:\n \"The maximum screen width used for showing the small screens version of the menu.\",\n type: \"number\",\n min: 0,\n defaultValue: DEFAULT_RESPONSIVE_BREAKPOINT,\n },\n\n // Slots\n brand: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"hbox\",\n tag: \"a\",\n attrs: { href: \"#\" },\n styles: { padding: \"0px\" },\n children: {\n type: \"img\",\n src: \"https://static1.plasmic.app/nav-logo-placeholder.svg\",\n styles: { height: \"40px\" },\n },\n },\n ],\n },\n openButton: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://static1.plasmic.app/menu.svg\",\n },\n },\n closeButton: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://static1.plasmic.app/close.svg\",\n },\n },\n menuItems: {\n type: \"slot\",\n defaultValue: [\"Home\", \"About\", \"Contact\"].map((title) => ({\n type: \"text\",\n tag: \"a\",\n attrs: { href: \"/\" },\n styles: { width: \"auto\" },\n value: title,\n })),\n },\n },\n defaultStyles: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n width: \"100%\",\n padding: \"16px\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n marginBottom: \"20px\",\n },\n};\n\nexport function registerNavigationBar(\n loader?: { registerComponent: typeof registerComponent },\n customMetaProps?: ComponentMeta<React.ComponentProps<typeof NavigationBar>>\n) {\n if (loader) {\n loader.registerComponent(\n NavigationBar,\n customMetaProps ?? navigationBarComponentMeta\n );\n } else {\n registerComponent(\n NavigationBar,\n customMetaProps ?? navigationBarComponentMeta\n );\n }\n}\n"],"names":["CSSClasses","container","menuButton","menuItemsContainer","menuItemsContainerOpen","DEFAULT_GAP","DEFAULT_RESPONSIVE_BREAKPOINT","NavigationBar","props","forceOpenMenu","_React$useState","React","useState","isOpen","setIsOpen","inEditor","useContext","PlasmicCanvasContext","shouldRenderMenu","useMemo","toggleMenu","value","gap","safeParseNumber","itemsGap","responsiveBreakpoint","cssStyles","minifyCss","className","dangerouslySetInnerHTML","__html","brand","onClick","tabIndex","closeButton","openButton","role","trim","menuItems","input","defaultValue","parsedValue","parseInt","isNaN","replace","navigationBarComponentMeta","name","displayName","importName","importPath","description","type","min","tag","attrs","href","styles","padding","children","src","height","map","title","width","defaultStyles","display","flexDirection","justifyContent","flexWrap","alignItems","marginBottom","registerNavigationBar","loader","customMetaProps","registerComponent"],"mappings":"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"}
|
package/dist/plasmic-nav.esm.js
CHANGED
|
@@ -61,7 +61,6 @@ function minifyCss(input) {
|
|
|
61
61
|
return input.replace(/\s{2,}|\n/g, "") // Remove spaces
|
|
62
62
|
.replace(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/g, ""); // Remove comments.
|
|
63
63
|
}
|
|
64
|
-
|
|
65
64
|
var navigationBarComponentMeta = {
|
|
66
65
|
name: "hostless-plasmic-navigation-bar",
|
|
67
66
|
displayName: "Navigation Bar",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plasmic-nav.esm.js","sources":["../src/PlasmicNavigationBar.tsx"],"sourcesContent":["import { ComponentMeta, PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n CanvasComponentProps,\n} from \"@plasmicapp/host/registerComponent\";\nimport React from \"react\";\n\ninterface Props extends CanvasComponentProps {\n brand?: React.ReactNode;\n menuItems?: React.ReactNode;\n className?: string;\n closeButton?: React.ReactNode;\n openButton?: React.ReactNode;\n forceOpenMenu?: boolean;\n itemsGap?: number;\n responsiveBreakpoint?: number;\n}\n\nconst CSSClasses = {\n container: \"plasmic-nav-container\",\n menuButton: \"plasmic-nav-menu-button\",\n menuItemsContainer: \"plasmic-nav-menu-items\",\n menuItemsContainerOpen: \"plasmic-nav-menu-items-open\",\n};\n\nconst DEFAULT_GAP = 8;\nconst DEFAULT_RESPONSIVE_BREAKPOINT = 768;\nexport function NavigationBar(props: Props) {\n const { forceOpenMenu } = props;\n const [isOpen, setIsOpen] = React.useState(false);\n const inEditor = React.useContext(PlasmicCanvasContext);\n\n const shouldRenderMenu = React.useMemo(() => {\n if (inEditor && forceOpenMenu) {\n return true;\n }\n\n return isOpen;\n }, [inEditor, forceOpenMenu, isOpen]);\n\n const toggleMenu = () => setIsOpen((value) => !value);\n\n // Parsing the gap manually to ensure it's a valid number\n // as we are using it in dangerouslySetInnerHTML.\n const gap = safeParseNumber(props.itemsGap, DEFAULT_GAP);\n const responsiveBreakpoint = safeParseNumber(\n props.responsiveBreakpoint,\n DEFAULT_RESPONSIVE_BREAKPOINT\n );\n\n const cssStyles = React.useMemo(\n () =>\n minifyCss(`\n /* Shared Styles */\n .${CSSClasses.container} {\n box-sizing: border-box;\n }\n\n .${CSSClasses.menuItemsContainer} {\n box-sizing: border-box;\n display: flex;\n }\n\n .${CSSClasses.menuItemsContainer} > * {\n flex: 0 0 auto;\n }\n\n /* Desktop Styles */\n @media (min-width: ${responsiveBreakpoint + 1}px) {\n .${CSSClasses.menuButton} {\n display: none;\n }\n\n .${CSSClasses.menuItemsContainer} {\n flex-direction: row;\n align-items: center;\n width: auto;\n }\n .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n margin-inline-start: ${gap}px;\n }\n }\n\n /* Mobile Styles */\n @media (max-width: ${responsiveBreakpoint}px) {\n .${CSSClasses.menuButton} {\n unset: all;\n -webkit-appearance: none;\n min-width: 40px;\n min-height: 40px;\n padding: 0;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n cursor: pointer;\n }\n\n .${CSSClasses.menuItemsContainer}:not(.${\n CSSClasses.menuItemsContainerOpen\n }) {\n display: none;\n }\n\n .${CSSClasses.menuItemsContainer} {\n margin-top: 10px;\n flex-direction: column;\n flex-shrink: 0;\n width: 100%;\n }\n .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n margin-top: ${gap}px;\n }\n }\n `),\n [gap, responsiveBreakpoint]\n );\n\n return (\n <div className={`${CSSClasses.container} ${props.className}`}>\n <style dangerouslySetInnerHTML={{ __html: cssStyles }} />\n <div>{props.brand}</div>\n <button\n className={CSSClasses.menuButton}\n onClick={toggleMenu}\n tabIndex={0}\n aria-expanded={shouldRenderMenu}\n >\n {shouldRenderMenu ? props.closeButton : props.openButton}\n </button>\n <nav\n role=\"menu\"\n className={`${CSSClasses.menuItemsContainer} ${\n shouldRenderMenu ? CSSClasses.menuItemsContainerOpen : \"\"\n }`.trim()}\n >\n {props.menuItems}\n </nav>\n </div>\n );\n}\n\nfunction safeParseNumber(input: any, defaultValue: number = 0) {\n const parsedValue = parseInt(input, 10);\n return isNaN(parsedValue) ? defaultValue : parsedValue;\n}\n\nfunction minifyCss(input: string) {\n return input\n .replace(/\\s{2,}|\\n/g, \"\") // Remove spaces\n .replace(/\\/\\*[\\s\\S]*?\\*\\/|([^:]|^)\\/\\/.*$/g, \"\"); // Remove comments.\n}\n\nexport const navigationBarComponentMeta: ComponentMeta<Props> = {\n name: `hostless-plasmic-navigation-bar`,\n displayName: \"Navigation Bar\",\n importName: \"NavigationBar\",\n importPath: \"@plasmicpkgs/plasmic-nav\",\n props: {\n // Properties\n forceOpenMenu: {\n displayName: \"Force Open Menu\",\n description:\n \"Use this option to open the menu during design time so you can easily customize the close button and menu items for small screens. This option is ignored when publishing the page.\",\n type: \"boolean\",\n },\n itemsGap: {\n displayName: \"Items Gap\",\n description: \"The width of the space between menu items in pixels.\",\n type: \"number\",\n min: 0,\n defaultValue: DEFAULT_GAP,\n },\n responsiveBreakpoint: {\n displayName: \"Small Screens Breakpoint\",\n description:\n \"The maximum screen width used for showing the small screens version of the menu.\",\n type: \"number\",\n min: 0,\n defaultValue: DEFAULT_RESPONSIVE_BREAKPOINT,\n },\n\n // Slots\n brand: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"hbox\",\n tag: \"a\",\n attrs: { href: \"#\" },\n styles: { padding: \"0px\" },\n children: {\n type: \"img\",\n src: \"https://static1.plasmic.app/nav-logo-placeholder.svg\",\n styles: { height: \"40px\" },\n },\n },\n ],\n },\n openButton: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://static1.plasmic.app/menu.svg\",\n },\n },\n closeButton: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://static1.plasmic.app/close.svg\",\n },\n },\n menuItems: {\n type: \"slot\",\n defaultValue: [\"Home\", \"About\", \"Contact\"].map((title) => ({\n type: \"text\",\n tag: \"a\",\n attrs: { href: \"/\" },\n styles: { width: \"auto\" },\n value: title,\n })),\n },\n },\n defaultStyles: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n width: \"100%\",\n padding: \"16px\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n marginBottom: \"20px\",\n },\n};\n\nexport function registerNavigationBar(\n loader?: { registerComponent: typeof registerComponent },\n customMetaProps?: ComponentMeta<React.ComponentProps<typeof NavigationBar>>\n) {\n if (loader) {\n loader.registerComponent(\n NavigationBar,\n customMetaProps ?? navigationBarComponentMeta\n );\n } else {\n registerComponent(\n NavigationBar,\n customMetaProps ?? navigationBarComponentMeta\n );\n }\n}\n"],"names":["CSSClasses","container","menuButton","menuItemsContainer","menuItemsContainerOpen","DEFAULT_GAP","DEFAULT_RESPONSIVE_BREAKPOINT","NavigationBar","props","forceOpenMenu","_React$useState","React","useState","isOpen","setIsOpen","inEditor","useContext","PlasmicCanvasContext","shouldRenderMenu","useMemo","toggleMenu","value","gap","safeParseNumber","itemsGap","responsiveBreakpoint","cssStyles","minifyCss","className","dangerouslySetInnerHTML","__html","brand","onClick","tabIndex","closeButton","openButton","role","trim","menuItems","input","defaultValue","parsedValue","parseInt","isNaN","replace","navigationBarComponentMeta","name","displayName","importName","importPath","description","type","min","tag","attrs","href","styles","padding","children","src","height","map","title","width","defaultStyles","display","flexDirection","justifyContent","flexWrap","alignItems","marginBottom","registerNavigationBar","loader","customMetaProps","registerComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"plasmic-nav.esm.js","sources":["../src/PlasmicNavigationBar.tsx"],"sourcesContent":["import { ComponentMeta, PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent, {\n CanvasComponentProps,\n} from \"@plasmicapp/host/registerComponent\";\nimport React from \"react\";\n\ninterface Props extends CanvasComponentProps {\n brand?: React.ReactNode;\n menuItems?: React.ReactNode;\n className?: string;\n closeButton?: React.ReactNode;\n openButton?: React.ReactNode;\n forceOpenMenu?: boolean;\n itemsGap?: number;\n responsiveBreakpoint?: number;\n}\n\nconst CSSClasses = {\n container: \"plasmic-nav-container\",\n menuButton: \"plasmic-nav-menu-button\",\n menuItemsContainer: \"plasmic-nav-menu-items\",\n menuItemsContainerOpen: \"plasmic-nav-menu-items-open\",\n};\n\nconst DEFAULT_GAP = 8;\nconst DEFAULT_RESPONSIVE_BREAKPOINT = 768;\nexport function NavigationBar(props: Props) {\n const { forceOpenMenu } = props;\n const [isOpen, setIsOpen] = React.useState(false);\n const inEditor = React.useContext(PlasmicCanvasContext);\n\n const shouldRenderMenu = React.useMemo(() => {\n if (inEditor && forceOpenMenu) {\n return true;\n }\n\n return isOpen;\n }, [inEditor, forceOpenMenu, isOpen]);\n\n const toggleMenu = () => setIsOpen((value) => !value);\n\n // Parsing the gap manually to ensure it's a valid number\n // as we are using it in dangerouslySetInnerHTML.\n const gap = safeParseNumber(props.itemsGap, DEFAULT_GAP);\n const responsiveBreakpoint = safeParseNumber(\n props.responsiveBreakpoint,\n DEFAULT_RESPONSIVE_BREAKPOINT\n );\n\n const cssStyles = React.useMemo(\n () =>\n minifyCss(`\n /* Shared Styles */\n .${CSSClasses.container} {\n box-sizing: border-box;\n }\n\n .${CSSClasses.menuItemsContainer} {\n box-sizing: border-box;\n display: flex;\n }\n\n .${CSSClasses.menuItemsContainer} > * {\n flex: 0 0 auto;\n }\n\n /* Desktop Styles */\n @media (min-width: ${responsiveBreakpoint + 1}px) {\n .${CSSClasses.menuButton} {\n display: none;\n }\n\n .${CSSClasses.menuItemsContainer} {\n flex-direction: row;\n align-items: center;\n width: auto;\n }\n .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n margin-inline-start: ${gap}px;\n }\n }\n\n /* Mobile Styles */\n @media (max-width: ${responsiveBreakpoint}px) {\n .${CSSClasses.menuButton} {\n unset: all;\n -webkit-appearance: none;\n min-width: 40px;\n min-height: 40px;\n padding: 0;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n cursor: pointer;\n }\n\n .${CSSClasses.menuItemsContainer}:not(.${\n CSSClasses.menuItemsContainerOpen\n }) {\n display: none;\n }\n\n .${CSSClasses.menuItemsContainer} {\n margin-top: 10px;\n flex-direction: column;\n flex-shrink: 0;\n width: 100%;\n }\n .${CSSClasses.menuItemsContainer} > *:not(:first-child) {\n margin-top: ${gap}px;\n }\n }\n `),\n [gap, responsiveBreakpoint]\n );\n\n return (\n <div className={`${CSSClasses.container} ${props.className}`}>\n <style dangerouslySetInnerHTML={{ __html: cssStyles }} />\n <div>{props.brand}</div>\n <button\n className={CSSClasses.menuButton}\n onClick={toggleMenu}\n tabIndex={0}\n aria-expanded={shouldRenderMenu}\n >\n {shouldRenderMenu ? props.closeButton : props.openButton}\n </button>\n <nav\n role=\"menu\"\n className={`${CSSClasses.menuItemsContainer} ${\n shouldRenderMenu ? CSSClasses.menuItemsContainerOpen : \"\"\n }`.trim()}\n >\n {props.menuItems}\n </nav>\n </div>\n );\n}\n\nfunction safeParseNumber(input: any, defaultValue: number = 0) {\n const parsedValue = parseInt(input, 10);\n return isNaN(parsedValue) ? defaultValue : parsedValue;\n}\n\nfunction minifyCss(input: string) {\n return input\n .replace(/\\s{2,}|\\n/g, \"\") // Remove spaces\n .replace(/\\/\\*[\\s\\S]*?\\*\\/|([^:]|^)\\/\\/.*$/g, \"\"); // Remove comments.\n}\n\nexport const navigationBarComponentMeta: ComponentMeta<Props> = {\n name: `hostless-plasmic-navigation-bar`,\n displayName: \"Navigation Bar\",\n importName: \"NavigationBar\",\n importPath: \"@plasmicpkgs/plasmic-nav\",\n props: {\n // Properties\n forceOpenMenu: {\n displayName: \"Force Open Menu\",\n description:\n \"Use this option to open the menu during design time so you can easily customize the close button and menu items for small screens. This option is ignored when publishing the page.\",\n type: \"boolean\",\n },\n itemsGap: {\n displayName: \"Items Gap\",\n description: \"The width of the space between menu items in pixels.\",\n type: \"number\",\n min: 0,\n defaultValue: DEFAULT_GAP,\n },\n responsiveBreakpoint: {\n displayName: \"Small Screens Breakpoint\",\n description:\n \"The maximum screen width used for showing the small screens version of the menu.\",\n type: \"number\",\n min: 0,\n defaultValue: DEFAULT_RESPONSIVE_BREAKPOINT,\n },\n\n // Slots\n brand: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"hbox\",\n tag: \"a\",\n attrs: { href: \"#\" },\n styles: { padding: \"0px\" },\n children: {\n type: \"img\",\n src: \"https://static1.plasmic.app/nav-logo-placeholder.svg\",\n styles: { height: \"40px\" },\n },\n },\n ],\n },\n openButton: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://static1.plasmic.app/menu.svg\",\n },\n },\n closeButton: {\n type: \"slot\",\n defaultValue: {\n type: \"img\",\n src: \"https://static1.plasmic.app/close.svg\",\n },\n },\n menuItems: {\n type: \"slot\",\n defaultValue: [\"Home\", \"About\", \"Contact\"].map((title) => ({\n type: \"text\",\n tag: \"a\",\n attrs: { href: \"/\" },\n styles: { width: \"auto\" },\n value: title,\n })),\n },\n },\n defaultStyles: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n width: \"100%\",\n padding: \"16px\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n marginBottom: \"20px\",\n },\n};\n\nexport function registerNavigationBar(\n loader?: { registerComponent: typeof registerComponent },\n customMetaProps?: ComponentMeta<React.ComponentProps<typeof NavigationBar>>\n) {\n if (loader) {\n loader.registerComponent(\n NavigationBar,\n customMetaProps ?? navigationBarComponentMeta\n );\n } else {\n registerComponent(\n NavigationBar,\n customMetaProps ?? navigationBarComponentMeta\n );\n }\n}\n"],"names":["CSSClasses","container","menuButton","menuItemsContainer","menuItemsContainerOpen","DEFAULT_GAP","DEFAULT_RESPONSIVE_BREAKPOINT","NavigationBar","props","forceOpenMenu","_React$useState","React","useState","isOpen","setIsOpen","inEditor","useContext","PlasmicCanvasContext","shouldRenderMenu","useMemo","toggleMenu","value","gap","safeParseNumber","itemsGap","responsiveBreakpoint","cssStyles","minifyCss","className","dangerouslySetInnerHTML","__html","brand","onClick","tabIndex","closeButton","openButton","role","trim","menuItems","input","defaultValue","parsedValue","parseInt","isNaN","replace","navigationBarComponentMeta","name","displayName","importName","importPath","description","type","min","tag","attrs","href","styles","padding","children","src","height","map","title","width","defaultStyles","display","flexDirection","justifyContent","flexWrap","alignItems","marginBottom","registerNavigationBar","loader","customMetaProps","registerComponent"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@plasmicpkgs/plasmic-nav",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.180",
|
|
4
4
|
"description": "Plasmic mobile navigation menu and registration calls",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"analyze": "size-limit --why"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@plasmicapp/host": "1.0.
|
|
31
|
+
"@plasmicapp/host": "1.0.210",
|
|
32
32
|
"@size-limit/preset-small-lib": "^4.11.0",
|
|
33
33
|
"@types/node": "^14.0.26",
|
|
34
34
|
"@types/react": "^18.0.27",
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"publishConfig": {
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "7f923856013e0efa4eb893fa16c2f48bd4edc9c3"
|
|
48
48
|
}
|