From 98faef4c2be3b1c62d9c674795bf464016925a59 Mon Sep 17 00:00:00 2001 From: amiceli Date: Tue, 17 Feb 2026 22:31:01 +0100 Subject: [PATCH 1/3] chore: update some just commands --- Justfile | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/Justfile b/Justfile index 52201b8..0b44a2c 100644 --- a/Justfile +++ b/Justfile @@ -1,12 +1,19 @@ stencil: tmux new-session -d -s "papier-stencil" - tmux send-keys -t "papier-stencil" "npm run start" ENTER + tmux send-keys -t "papier-stencil" "npm run build:watch" ENTER + +watch_changes: + npx nodemon --exec "npx histoire dev" src/components/**/*.tsx histoire: tmux new-session -d -s "papier-histoire" - tmux send-keys -t "papier-histoire" "npx histoire dev" ENTER + tmux send-keys -t "papier-histoire" "just watch_changes" ENTER open 'http://localhost:6006/' +start: + just stencil + just histoire + build: npm run build @@ -15,3 +22,6 @@ biome: create component: npx stencil g {{component}} + mkdir src/components/{{component}}/stories + touch src/components/{{component}}/stories/{{component}}.story.vue + touch src/components/{{component}}/stories/{{component}}.specs.story.vue From 3045915193f78a3e9ed9b2781ffbc6e94a4eea35 Mon Sep 17 00:00:00 2001 From: amiceli Date: Tue, 17 Feb 2026 22:31:16 +0100 Subject: [PATCH 2/3] fix: component name --- histoire/setup.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/histoire/setup.ts b/histoire/setup.ts index 5273c52..d86b404 100644 --- a/histoire/setup.ts +++ b/histoire/setup.ts @@ -1,6 +1,6 @@ import { defineSetupVue3 } from '@histoire/plugin-vue' -import HistoireSeutp from './HistoireSetup.vue' +import HistoireSetup from './HistoireSetup.vue' export const setupVue3 = defineSetupVue3(({ addWrapper }) => { - addWrapper(HistoireSeutp) + addWrapper(HistoireSetup) }) From 0a0bde57636a8107dc8f2ae9c5d348f277614bc6 Mon Sep 17 00:00:00 2001 From: amiceli Date: Tue, 17 Feb 2026 22:31:32 +0100 Subject: [PATCH 3/3] feat: add sidebar and sidebar item components / stories --- src/components.d.ts | 308 +++++++++++++++--- .../p-sidebar-item/p-sidebar-item.scss | 29 ++ .../p-sidebar-item/p-sidebar-item.tsx | 39 +++ src/components/p-sidebar-item/readme.md | 20 ++ .../stories/p-sidebar-item.specs.story.vue | 0 .../stories/p-sidebar-item.story.vue | 0 src/components/p-sidebar/p-sidebar.scss | 78 +++++ src/components/p-sidebar/p-sidebar.tsx | 65 ++++ src/components/p-sidebar/readme.md | 20 ++ .../stories/p-sidebar.specs.story.vue | 23 ++ .../p-sidebar/stories/p-sidebar.story.vue | 89 +++++ .../p-sidebar/test/p-sidebar.e2e.ts | 11 + 12 files changed, 633 insertions(+), 49 deletions(-) create mode 100644 src/components/p-sidebar-item/p-sidebar-item.scss create mode 100644 src/components/p-sidebar-item/p-sidebar-item.tsx create mode 100644 src/components/p-sidebar-item/readme.md create mode 100644 src/components/p-sidebar-item/stories/p-sidebar-item.specs.story.vue create mode 100644 src/components/p-sidebar-item/stories/p-sidebar-item.story.vue create mode 100644 src/components/p-sidebar/p-sidebar.scss create mode 100644 src/components/p-sidebar/p-sidebar.tsx create mode 100644 src/components/p-sidebar/readme.md create mode 100644 src/components/p-sidebar/stories/p-sidebar.specs.story.vue create mode 100644 src/components/p-sidebar/stories/p-sidebar.story.vue create mode 100644 src/components/p-sidebar/test/p-sidebar.e2e.ts diff --git a/src/components.d.ts b/src/components.d.ts index 2ecfdf0..c637680 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -6,7 +6,9 @@ */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { PushOptions } from "./components/notification/p-notification-handler/p-notification-handler"; +import { PSidebarUser } from "./components/p-sidebar/p-sidebar"; export { PushOptions } from "./components/notification/p-notification-handler/p-notification-handler"; +export { PSidebarUser } from "./components/p-sidebar/p-sidebar"; export namespace Components { interface PAccordion { /** @@ -267,6 +269,27 @@ export namespace Components { */ "value"?: number; } + interface PSidebar { + /** + * @default false + */ + "dark"?: boolean; + "logo"?: string; + "title": string; + "user"?: PSidebarUser; + } + interface PSidebarItem { + /** + * @default false + */ + "active"?: boolean; + /** + * @default false + */ + "dark"?: boolean; + "icon"?: string; + "url": string; + } interface PSlider { /** * @default false @@ -595,6 +618,18 @@ declare global { prototype: HTMLPProgressBarElement; new (): HTMLPProgressBarElement; }; + interface HTMLPSidebarElement extends Components.PSidebar, HTMLStencilElement { + } + var HTMLPSidebarElement: { + prototype: HTMLPSidebarElement; + new (): HTMLPSidebarElement; + }; + interface HTMLPSidebarItemElement extends Components.PSidebarItem, HTMLStencilElement { + } + var HTMLPSidebarItemElement: { + prototype: HTMLPSidebarItemElement; + new (): HTMLPSidebarItemElement; + }; interface HTMLPSliderElementEventMap { "change": number; } @@ -690,6 +725,8 @@ declare global { "p-notification-handler": HTMLPNotificationHandlerElement; "p-notification-preview": HTMLPNotificationPreviewElement; "p-progress-bar": HTMLPProgressBarElement; + "p-sidebar": HTMLPSidebarElement; + "p-sidebar-item": HTMLPSidebarItemElement; "p-slider": HTMLPSliderElement; "p-spinner": HTMLPSpinnerElement; "p-switch": HTMLPSwitchElement; @@ -700,6 +737,8 @@ declare global { } } declare namespace LocalJSX { + type OneOf = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never }; + interface PAccordion { /** * @default false @@ -963,6 +1002,27 @@ declare namespace LocalJSX { */ "value"?: number; } + interface PSidebar { + /** + * @default false + */ + "dark"?: boolean; + "logo"?: string; + "title"?: string; + "user"?: PSidebarUser; + } + interface PSidebarItem { + /** + * @default false + */ + "active"?: boolean; + /** + * @default false + */ + "dark"?: boolean; + "icon"?: string; + "url"?: string; + } interface PSlider { /** * @default false @@ -1069,71 +1129,221 @@ declare namespace LocalJSX { */ "top"?: boolean; } + + interface PAccordionAttributes { + "title": string; + "open": boolean; + "dark": boolean; + } + interface PAlertAttributes { + "type": AlertColor; + "closable": boolean; + "dark": boolean; + } + interface PBadgeAttributes { + "type": BadgeColor; + "dark": boolean; + } + interface PBreadcrumbAttributes { + "dark": boolean; + } + interface PBreadcrumbItemAttributes { + "dark": boolean; + "first": boolean; + "link": string; + } + interface PButtonAttributes { + "type": ButtonColor; + "outline": boolean; + "large": boolean; + "small": boolean; + "block": boolean; + "disabled": boolean; + "dark": boolean; + "loading": boolean; + } + interface PCardAttributes { + "dark": boolean; + "radius": boolean; + "image": string; + } + interface PDropdownAttributes { + "dark": boolean; + "preventSelected": boolean; + "value": string; + "placeholder": string; + } + interface PDropdownItemAttributes { + "value": string; + "selected": boolean; + "dark": boolean; + } + interface PIconAttributes { + "icon": string; + "size": number; + "color": string; + } + interface PInputTextAttributes { + "placeholder": string; + "icon": string; + "value": string; + "required": boolean; + "dark": boolean; + "label": string; + "disabled": boolean; + "block": boolean; + "error": string; + } + interface PLeafAttributes { + "dark": boolean; + } + interface PNavbarAttributes { + "split": boolean; + "fixed": boolean; + "dark": boolean; + "rootLink": string; + "rootTitle": string; + } + interface PNavbarItemAttributes { + "dark": boolean; + "href": string; + "target": string; + "icon": string; + } + interface PNotificationAttributes { + "type": string; + "text": string; + "canclose": boolean; + "timestamp": string; + } + interface PProgressBarAttributes { + "type": ProgressBarColor; + "value": number; + "striped": boolean; + "dark": boolean; + "auto": number; + } + interface PSidebarAttributes { + "dark": boolean; + "logo": string; + "title": string; + } + interface PSidebarItemAttributes { + "dark": boolean; + "active": boolean; + "url": string; + "icon": string; + } + interface PSliderAttributes { + "value": number; + "min": number; + "max": number; + "block": boolean; + "dark": boolean; + } + interface PSpinnerAttributes { + "large": boolean; + "color": string; + "dark": boolean; + } + interface PSwitchAttributes { + "round": boolean; + "square": boolean; + "dark": boolean; + "checked": boolean; + } + interface PSwitchTileAttributes { + "dark": boolean; + "checked": boolean; + "checkedBackground": TileBackground; + "uncheckedBackground": TileBackground; + } + interface PTabAttributes { + "title": string; + "selected": boolean; + "dark": boolean; + } + interface PTabsAttributes { + "dark": boolean; + } + interface PTooltipAttributes { + "title": string; + "disabled": boolean; + "left": boolean; + "right": boolean; + "bottom": boolean; + "top": boolean; + } + interface IntrinsicElements { - "p-accordion": PAccordion; - "p-alert": PAlert; - "p-badge": PBadge; - "p-breadcrumb": PBreadcrumb; - "p-breadcrumb-item": PBreadcrumbItem; - "p-button": PButton; - "p-card": PCard; - "p-dropdown": PDropdown; - "p-dropdown-item": PDropdownItem; - "p-icon": PIcon; - "p-input-text": PInputText; - "p-leaf": PLeaf; + "p-accordion": Omit & { [K in keyof PAccordion & keyof PAccordionAttributes]?: PAccordion[K] } & { [K in keyof PAccordion & keyof PAccordionAttributes as `attr:${K}`]?: PAccordionAttributes[K] } & { [K in keyof PAccordion & keyof PAccordionAttributes as `prop:${K}`]?: PAccordion[K] }; + "p-alert": Omit & { [K in keyof PAlert & keyof PAlertAttributes]?: PAlert[K] } & { [K in keyof PAlert & keyof PAlertAttributes as `attr:${K}`]?: PAlertAttributes[K] } & { [K in keyof PAlert & keyof PAlertAttributes as `prop:${K}`]?: PAlert[K] }; + "p-badge": Omit & { [K in keyof PBadge & keyof PBadgeAttributes]?: PBadge[K] } & { [K in keyof PBadge & keyof PBadgeAttributes as `attr:${K}`]?: PBadgeAttributes[K] } & { [K in keyof PBadge & keyof PBadgeAttributes as `prop:${K}`]?: PBadge[K] }; + "p-breadcrumb": Omit & { [K in keyof PBreadcrumb & keyof PBreadcrumbAttributes]?: PBreadcrumb[K] } & { [K in keyof PBreadcrumb & keyof PBreadcrumbAttributes as `attr:${K}`]?: PBreadcrumbAttributes[K] } & { [K in keyof PBreadcrumb & keyof PBreadcrumbAttributes as `prop:${K}`]?: PBreadcrumb[K] }; + "p-breadcrumb-item": Omit & { [K in keyof PBreadcrumbItem & keyof PBreadcrumbItemAttributes]?: PBreadcrumbItem[K] } & { [K in keyof PBreadcrumbItem & keyof PBreadcrumbItemAttributes as `attr:${K}`]?: PBreadcrumbItemAttributes[K] } & { [K in keyof PBreadcrumbItem & keyof PBreadcrumbItemAttributes as `prop:${K}`]?: PBreadcrumbItem[K] }; + "p-button": Omit & { [K in keyof PButton & keyof PButtonAttributes]?: PButton[K] } & { [K in keyof PButton & keyof PButtonAttributes as `attr:${K}`]?: PButtonAttributes[K] } & { [K in keyof PButton & keyof PButtonAttributes as `prop:${K}`]?: PButton[K] }; + "p-card": Omit & { [K in keyof PCard & keyof PCardAttributes]?: PCard[K] } & { [K in keyof PCard & keyof PCardAttributes as `attr:${K}`]?: PCardAttributes[K] } & { [K in keyof PCard & keyof PCardAttributes as `prop:${K}`]?: PCard[K] }; + "p-dropdown": Omit & { [K in keyof PDropdown & keyof PDropdownAttributes]?: PDropdown[K] } & { [K in keyof PDropdown & keyof PDropdownAttributes as `attr:${K}`]?: PDropdownAttributes[K] } & { [K in keyof PDropdown & keyof PDropdownAttributes as `prop:${K}`]?: PDropdown[K] }; + "p-dropdown-item": Omit & { [K in keyof PDropdownItem & keyof PDropdownItemAttributes]?: PDropdownItem[K] } & { [K in keyof PDropdownItem & keyof PDropdownItemAttributes as `attr:${K}`]?: PDropdownItemAttributes[K] } & { [K in keyof PDropdownItem & keyof PDropdownItemAttributes as `prop:${K}`]?: PDropdownItem[K] } & OneOf<"value", PDropdownItem["value"], PDropdownItemAttributes["value"]>; + "p-icon": Omit & { [K in keyof PIcon & keyof PIconAttributes]?: PIcon[K] } & { [K in keyof PIcon & keyof PIconAttributes as `attr:${K}`]?: PIconAttributes[K] } & { [K in keyof PIcon & keyof PIconAttributes as `prop:${K}`]?: PIcon[K] }; + "p-input-text": Omit & { [K in keyof PInputText & keyof PInputTextAttributes]?: PInputText[K] } & { [K in keyof PInputText & keyof PInputTextAttributes as `attr:${K}`]?: PInputTextAttributes[K] } & { [K in keyof PInputText & keyof PInputTextAttributes as `prop:${K}`]?: PInputText[K] }; + "p-leaf": Omit & { [K in keyof PLeaf & keyof PLeafAttributes]?: PLeaf[K] } & { [K in keyof PLeaf & keyof PLeafAttributes as `attr:${K}`]?: PLeafAttributes[K] } & { [K in keyof PLeaf & keyof PLeafAttributes as `prop:${K}`]?: PLeaf[K] }; "p-modal": PModal; - "p-navbar": PNavbar; - "p-navbar-item": PNavbarItem; - "p-notification": PNotification; + "p-navbar": Omit & { [K in keyof PNavbar & keyof PNavbarAttributes]?: PNavbar[K] } & { [K in keyof PNavbar & keyof PNavbarAttributes as `attr:${K}`]?: PNavbarAttributes[K] } & { [K in keyof PNavbar & keyof PNavbarAttributes as `prop:${K}`]?: PNavbar[K] }; + "p-navbar-item": Omit & { [K in keyof PNavbarItem & keyof PNavbarItemAttributes]?: PNavbarItem[K] } & { [K in keyof PNavbarItem & keyof PNavbarItemAttributes as `attr:${K}`]?: PNavbarItemAttributes[K] } & { [K in keyof PNavbarItem & keyof PNavbarItemAttributes as `prop:${K}`]?: PNavbarItem[K] }; + "p-notification": Omit & { [K in keyof PNotification & keyof PNotificationAttributes]?: PNotification[K] } & { [K in keyof PNotification & keyof PNotificationAttributes as `attr:${K}`]?: PNotificationAttributes[K] } & { [K in keyof PNotification & keyof PNotificationAttributes as `prop:${K}`]?: PNotification[K] }; "p-notification-handler": PNotificationHandler; "p-notification-preview": PNotificationPreview; - "p-progress-bar": PProgressBar; - "p-slider": PSlider; - "p-spinner": PSpinner; - "p-switch": PSwitch; - "p-switch-tile": PSwitchTile; - "p-tab": PTab; - "p-tabs": PTabs; - "p-tooltip": PTooltip; + "p-progress-bar": Omit & { [K in keyof PProgressBar & keyof PProgressBarAttributes]?: PProgressBar[K] } & { [K in keyof PProgressBar & keyof PProgressBarAttributes as `attr:${K}`]?: PProgressBarAttributes[K] } & { [K in keyof PProgressBar & keyof PProgressBarAttributes as `prop:${K}`]?: PProgressBar[K] }; + "p-sidebar": Omit & { [K in keyof PSidebar & keyof PSidebarAttributes]?: PSidebar[K] } & { [K in keyof PSidebar & keyof PSidebarAttributes as `attr:${K}`]?: PSidebarAttributes[K] } & { [K in keyof PSidebar & keyof PSidebarAttributes as `prop:${K}`]?: PSidebar[K] }; + "p-sidebar-item": Omit & { [K in keyof PSidebarItem & keyof PSidebarItemAttributes]?: PSidebarItem[K] } & { [K in keyof PSidebarItem & keyof PSidebarItemAttributes as `attr:${K}`]?: PSidebarItemAttributes[K] } & { [K in keyof PSidebarItem & keyof PSidebarItemAttributes as `prop:${K}`]?: PSidebarItem[K] }; + "p-slider": Omit & { [K in keyof PSlider & keyof PSliderAttributes]?: PSlider[K] } & { [K in keyof PSlider & keyof PSliderAttributes as `attr:${K}`]?: PSliderAttributes[K] } & { [K in keyof PSlider & keyof PSliderAttributes as `prop:${K}`]?: PSlider[K] }; + "p-spinner": Omit & { [K in keyof PSpinner & keyof PSpinnerAttributes]?: PSpinner[K] } & { [K in keyof PSpinner & keyof PSpinnerAttributes as `attr:${K}`]?: PSpinnerAttributes[K] } & { [K in keyof PSpinner & keyof PSpinnerAttributes as `prop:${K}`]?: PSpinner[K] }; + "p-switch": Omit & { [K in keyof PSwitch & keyof PSwitchAttributes]?: PSwitch[K] } & { [K in keyof PSwitch & keyof PSwitchAttributes as `attr:${K}`]?: PSwitchAttributes[K] } & { [K in keyof PSwitch & keyof PSwitchAttributes as `prop:${K}`]?: PSwitch[K] }; + "p-switch-tile": Omit & { [K in keyof PSwitchTile & keyof PSwitchTileAttributes]?: PSwitchTile[K] } & { [K in keyof PSwitchTile & keyof PSwitchTileAttributes as `attr:${K}`]?: PSwitchTileAttributes[K] } & { [K in keyof PSwitchTile & keyof PSwitchTileAttributes as `prop:${K}`]?: PSwitchTile[K] }; + "p-tab": Omit & { [K in keyof PTab & keyof PTabAttributes]?: PTab[K] } & { [K in keyof PTab & keyof PTabAttributes as `attr:${K}`]?: PTabAttributes[K] } & { [K in keyof PTab & keyof PTabAttributes as `prop:${K}`]?: PTab[K] }; + "p-tabs": Omit & { [K in keyof PTabs & keyof PTabsAttributes]?: PTabs[K] } & { [K in keyof PTabs & keyof PTabsAttributes as `attr:${K}`]?: PTabsAttributes[K] } & { [K in keyof PTabs & keyof PTabsAttributes as `prop:${K}`]?: PTabs[K] }; + "p-tooltip": Omit & { [K in keyof PTooltip & keyof PTooltipAttributes]?: PTooltip[K] } & { [K in keyof PTooltip & keyof PTooltipAttributes as `attr:${K}`]?: PTooltipAttributes[K] } & { [K in keyof PTooltip & keyof PTooltipAttributes as `prop:${K}`]?: PTooltip[K] }; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { - "p-accordion": LocalJSX.PAccordion & JSXBase.HTMLAttributes; + "p-accordion": LocalJSX.IntrinsicElements["p-accordion"] & JSXBase.HTMLAttributes; /** * @Slot - alert content */ - "p-alert": LocalJSX.PAlert & JSXBase.HTMLAttributes; - "p-badge": LocalJSX.PBadge & JSXBase.HTMLAttributes; - "p-breadcrumb": LocalJSX.PBreadcrumb & JSXBase.HTMLAttributes; - "p-breadcrumb-item": LocalJSX.PBreadcrumbItem & JSXBase.HTMLAttributes; - "p-button": LocalJSX.PButton & JSXBase.HTMLAttributes; - "p-card": LocalJSX.PCard & JSXBase.HTMLAttributes; - "p-dropdown": LocalJSX.PDropdown & JSXBase.HTMLAttributes; - "p-dropdown-item": LocalJSX.PDropdownItem & JSXBase.HTMLAttributes; - "p-icon": LocalJSX.PIcon & JSXBase.HTMLAttributes; - "p-input-text": LocalJSX.PInputText & JSXBase.HTMLAttributes; + "p-alert": LocalJSX.IntrinsicElements["p-alert"] & JSXBase.HTMLAttributes; + "p-badge": LocalJSX.IntrinsicElements["p-badge"] & JSXBase.HTMLAttributes; + "p-breadcrumb": LocalJSX.IntrinsicElements["p-breadcrumb"] & JSXBase.HTMLAttributes; + "p-breadcrumb-item": LocalJSX.IntrinsicElements["p-breadcrumb-item"] & JSXBase.HTMLAttributes; + "p-button": LocalJSX.IntrinsicElements["p-button"] & JSXBase.HTMLAttributes; + "p-card": LocalJSX.IntrinsicElements["p-card"] & JSXBase.HTMLAttributes; + "p-dropdown": LocalJSX.IntrinsicElements["p-dropdown"] & JSXBase.HTMLAttributes; + "p-dropdown-item": LocalJSX.IntrinsicElements["p-dropdown-item"] & JSXBase.HTMLAttributes; + "p-icon": LocalJSX.IntrinsicElements["p-icon"] & JSXBase.HTMLAttributes; + "p-input-text": LocalJSX.IntrinsicElements["p-input-text"] & JSXBase.HTMLAttributes; /** * @slots default - p-leaf content */ - "p-leaf": LocalJSX.PLeaf & JSXBase.HTMLAttributes; - "p-modal": LocalJSX.PModal & JSXBase.HTMLAttributes; - "p-navbar": LocalJSX.PNavbar & JSXBase.HTMLAttributes; - "p-navbar-item": LocalJSX.PNavbarItem & JSXBase.HTMLAttributes; - "p-notification": LocalJSX.PNotification & JSXBase.HTMLAttributes; - "p-notification-handler": LocalJSX.PNotificationHandler & JSXBase.HTMLAttributes; - "p-notification-preview": LocalJSX.PNotificationPreview & JSXBase.HTMLAttributes; - "p-progress-bar": LocalJSX.PProgressBar & JSXBase.HTMLAttributes; - "p-slider": LocalJSX.PSlider & JSXBase.HTMLAttributes; - "p-spinner": LocalJSX.PSpinner & JSXBase.HTMLAttributes; - "p-switch": LocalJSX.PSwitch & JSXBase.HTMLAttributes; - "p-switch-tile": LocalJSX.PSwitchTile & JSXBase.HTMLAttributes; - "p-tab": LocalJSX.PTab & JSXBase.HTMLAttributes; - "p-tabs": LocalJSX.PTabs & JSXBase.HTMLAttributes; - "p-tooltip": LocalJSX.PTooltip & JSXBase.HTMLAttributes; + "p-leaf": LocalJSX.IntrinsicElements["p-leaf"] & JSXBase.HTMLAttributes; + "p-modal": LocalJSX.IntrinsicElements["p-modal"] & JSXBase.HTMLAttributes; + "p-navbar": LocalJSX.IntrinsicElements["p-navbar"] & JSXBase.HTMLAttributes; + "p-navbar-item": LocalJSX.IntrinsicElements["p-navbar-item"] & JSXBase.HTMLAttributes; + "p-notification": LocalJSX.IntrinsicElements["p-notification"] & JSXBase.HTMLAttributes; + "p-notification-handler": LocalJSX.IntrinsicElements["p-notification-handler"] & JSXBase.HTMLAttributes; + "p-notification-preview": LocalJSX.IntrinsicElements["p-notification-preview"] & JSXBase.HTMLAttributes; + "p-progress-bar": LocalJSX.IntrinsicElements["p-progress-bar"] & JSXBase.HTMLAttributes; + "p-sidebar": LocalJSX.IntrinsicElements["p-sidebar"] & JSXBase.HTMLAttributes; + "p-sidebar-item": LocalJSX.IntrinsicElements["p-sidebar-item"] & JSXBase.HTMLAttributes; + "p-slider": LocalJSX.IntrinsicElements["p-slider"] & JSXBase.HTMLAttributes; + "p-spinner": LocalJSX.IntrinsicElements["p-spinner"] & JSXBase.HTMLAttributes; + "p-switch": LocalJSX.IntrinsicElements["p-switch"] & JSXBase.HTMLAttributes; + "p-switch-tile": LocalJSX.IntrinsicElements["p-switch-tile"] & JSXBase.HTMLAttributes; + "p-tab": LocalJSX.IntrinsicElements["p-tab"] & JSXBase.HTMLAttributes; + "p-tabs": LocalJSX.IntrinsicElements["p-tabs"] & JSXBase.HTMLAttributes; + "p-tooltip": LocalJSX.IntrinsicElements["p-tooltip"] & JSXBase.HTMLAttributes; } } } diff --git a/src/components/p-sidebar-item/p-sidebar-item.scss b/src/components/p-sidebar-item/p-sidebar-item.scss new file mode 100644 index 0000000..559094a --- /dev/null +++ b/src/components/p-sidebar-item/p-sidebar-item.scss @@ -0,0 +1,29 @@ +:host { + @import "../common"; + + .papier { + display: block; + display: flex; + align-items: center; + gap: 20px; + height: 30px; + box-sizing: border-box; + padding-left: 10px; + padding-right: 10px; + + &:hover { + background: #323337; + cursor: pointer; + } + + &.is--active { + background: #323337; + border-bottom-left-radius: 15px 255px; + border-bottom-right-radius: 225px 15px; + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + box-sizing: border-box; + border: 1px white solid; + } + } +} diff --git a/src/components/p-sidebar-item/p-sidebar-item.tsx b/src/components/p-sidebar-item/p-sidebar-item.tsx new file mode 100644 index 0000000..6232874 --- /dev/null +++ b/src/components/p-sidebar-item/p-sidebar-item.tsx @@ -0,0 +1,39 @@ +import { Component, Host, h, Prop } from '@stencil/core' + +@Component({ + tag: 'p-sidebar-item', + styleUrl: 'p-sidebar-item.scss', + shadow: true, +}) +export class PSidebarItem { + @Prop() + public dark?: boolean = false + + @Prop() + public active?: boolean = false + + @Prop() + public url: string + + @Prop() + public icon?: string + + private getComponentClasses() { + return { + papier: true, + 'is--dark': this.dark, + 'is--active': this.active, + } + } + + render() { + return ( + +
+ {this.icon && } + +
+ + ) + } +} diff --git a/src/components/p-sidebar-item/readme.md b/src/components/p-sidebar-item/readme.md new file mode 100644 index 0000000..35750cd --- /dev/null +++ b/src/components/p-sidebar-item/readme.md @@ -0,0 +1,20 @@ +# p-sidebar-item + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | --------- | ----------- | +| `active` | `active` | | `boolean` | `false` | +| `dark` | `dark` | | `boolean` | `false` | +| `icon` | `icon` | | `string` | `undefined` | +| `url` | `url` | | `string` | `undefined` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/p-sidebar-item/stories/p-sidebar-item.specs.story.vue b/src/components/p-sidebar-item/stories/p-sidebar-item.specs.story.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/components/p-sidebar-item/stories/p-sidebar-item.story.vue b/src/components/p-sidebar-item/stories/p-sidebar-item.story.vue new file mode 100644 index 0000000..e69de29 diff --git a/src/components/p-sidebar/p-sidebar.scss b/src/components/p-sidebar/p-sidebar.scss new file mode 100644 index 0000000..d2ee343 --- /dev/null +++ b/src/components/p-sidebar/p-sidebar.scss @@ -0,0 +1,78 @@ +:host { + @import "../common"; + + display: block; + height: 100%; + + .papier, + .sidebar { + height: 100%; + } + + .sidebar { + width: 256px; + display: grid !important; + grid-template-rows: auto 1fr auto; + grid-template-columns: 1fr; + justify-content: space-between; + + border-bottom-left-radius: 15px 255px; + border-bottom-right-radius: 225px 15px; + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + box-sizing: border-box; + padding: 20px; + + &__menu { + display: block; + } + + &__footer { + position: relative; + + .footer__clickable { + display: grid; + grid-template-columns: 40px 1fr; + gap: 20px; + + img { + width: 40px; + height: 40px; + border-radius: 4px; + + & + div { + display: flex; + flex-direction: column; + + span { + font-size: 12px; + } + } + } + } + + // .footer__actions { + // position: absolute; + // background: red; + // width: 100%; + // height: 100px; + // } + } + + &__top { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 20px; + + span { + font-size: 18px; + } + + img { + width: 40px; + height: 40px; + } + } + } +} diff --git a/src/components/p-sidebar/p-sidebar.tsx b/src/components/p-sidebar/p-sidebar.tsx new file mode 100644 index 0000000..e8072bb --- /dev/null +++ b/src/components/p-sidebar/p-sidebar.tsx @@ -0,0 +1,65 @@ +import { Component, Host, h, Prop } from '@stencil/core' + +export type PSidebarUser = { + name: string + email: string + photo: string +} + +@Component({ + tag: 'p-sidebar', + styleUrl: 'p-sidebar.scss', + shadow: true, +}) +export class PSidebar { + @Prop() + public dark?: boolean = false + + @Prop() + public logo?: string + + @Prop() + public title: string + + @Prop() + public user?: PSidebarUser + + render() { + return ( + +
+
+
+ {this.logo && missing logo} + {this.title} +
+
+ +
+
+ {this.user && ( +
+ something +
+ {this.user.name} + {this.user.email} +
+
+ )} + {this.user && ( +
+ +
+ )} +
+
+
+ + ) + } +} diff --git a/src/components/p-sidebar/readme.md b/src/components/p-sidebar/readme.md new file mode 100644 index 0000000..a39fcf1 --- /dev/null +++ b/src/components/p-sidebar/readme.md @@ -0,0 +1,20 @@ +# p-sidebar + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | ------------------------------------------------- | ----------- | +| `dark` | `dark` | | `boolean` | `false` | +| `logo` | `logo` | | `string` | `undefined` | +| `title` | `title` | | `string` | `undefined` | +| `user` | -- | | `{ name: string; email: string; photo: string; }` | `undefined` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/p-sidebar/stories/p-sidebar.specs.story.vue b/src/components/p-sidebar/stories/p-sidebar.specs.story.vue new file mode 100644 index 0000000..2ec4e17 --- /dev/null +++ b/src/components/p-sidebar/stories/p-sidebar.specs.story.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/src/components/p-sidebar/stories/p-sidebar.story.vue b/src/components/p-sidebar/stories/p-sidebar.story.vue new file mode 100644 index 0000000..af3399b --- /dev/null +++ b/src/components/p-sidebar/stories/p-sidebar.story.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/src/components/p-sidebar/test/p-sidebar.e2e.ts b/src/components/p-sidebar/test/p-sidebar.e2e.ts new file mode 100644 index 0000000..a3c1bf6 --- /dev/null +++ b/src/components/p-sidebar/test/p-sidebar.e2e.ts @@ -0,0 +1,11 @@ +import { newE2EPage } from '@stencil/core/testing' + +describe('p-sidebar', () => { + it('renders', async () => { + const page = await newE2EPage() + await page.setContent('') + + const element = await page.find('p-sidebar') + expect(element).toHaveClass('hydrated') + }) +})