@d-zero/custom-components 5.0.0-alpha.45

package/README.md

@@ -0,0 +1 @@
+# custom-components

package/dist/hamburger-menu.d.ts

@@ -0,0 +1,32 @@
+export declare class HamburgerMenu extends HTMLElement {
+    #private;
+    get lineCount(): number;
+    set lineCount(value: number);
+    constructor();
+    attributeChangedCallback(name: string, _: string, newValue: string): void;
+    connectedCallback(): void;
+    static defaultStyle: Readonly<{
+        readonly lineCount: 3;
+        readonly lineWidthValue: 80;
+        readonly lineWidthUnit: "cqi";
+        readonly lineHeightValue: 2;
+        readonly lineHeightUnit: "px";
+        readonly lineColor: "currentColor";
+        readonly borderRadiusValue: 0;
+        readonly borderRadiusUnit: "px";
+        readonly borderWidthValue: 1;
+        readonly borderWidthUnit: "px";
+        readonly borderStyle: "solid";
+        readonly borderColor: "currentColor";
+        readonly paddingBlockValue: 25;
+        readonly paddingBlockUnit: "cqi";
+        readonly paddingInlineValue: 20;
+        readonly paddingInlineUnit: "cqi";
+    }>;
+}
+/**
+ *
+ * @param prefix
+ */
+export declare function defineHamburgerMenu(prefix: string): string;
+//# sourceMappingURL=hamburger-menu.d.ts.map

package/dist/hamburger-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hamburger-menu.d.ts","sourceRoot":"","sources":["../src/hamburger-menu.ts"],"names":[],"mappings":"AAEA,qBAAa,aAAc,SAAQ,WAAW;;IAK7C,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,EAW1B;;IASD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAUlE,iBAAiB;IA8FjB,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;OAiBP;CACZ;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAM1D"}

package/dist/hamburger-menu.js

@@ -0,0 +1,151 @@
+var _a;
+export class HamburgerMenu extends HTMLElement {
+    #button = null;
+    #lineCount;
+    #slot = null;
+    get lineCount() {
+        return this.#lineCount;
+    }
+    set lineCount(value) {
+        if (value < 1) {
+            throw new RangeError('lineCount must be greater than 0');
+        }
+        if (Math.floor(value) !== value) {
+            throw new TypeError('lineCount must be an integer');
+        }
+        this.#lineCount = value;
+        this.setAttribute('line-count', value.toString());
+        this.#render();
+    }
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.#lineCount = 3;
+        this.#render();
+    }
+    attributeChangedCallback(name, _, newValue) {
+        switch (name) {
+            case 'line-count': {
+                this.#lineCount = Number.parseInt(newValue);
+                break;
+            }
+        }
+        this.#render();
+    }
+    connectedCallback() {
+        this.#slot?.addEventListener('slotchange', () => {
+            const realNodes = this.#slot?.assignedNodes({ flatten: true });
+            const dialog = realNodes?.find((node) => node instanceof HTMLDialogElement);
+            if (dialog) {
+                // @ts-ignore
+                this.#button.commandForElement = dialog;
+                const closeButton = dialog.querySelector('button[command="close"]');
+                if (closeButton) {
+                    // @ts-ignore
+                    closeButton.commandForElement = dialog;
+                }
+            }
+        });
+    }
+    #render() {
+        this.shadowRoot.innerHTML = `
+		<style>
+			:is(:host, *) {
+				box-sizing: border-box;
+			}
+			:host {
+				--line-width: ${_a.defaultStyle.lineWidthValue}${_a.defaultStyle.lineWidthUnit};
+				--line-height: ${_a.defaultStyle.lineHeightValue}${_a.defaultStyle.lineHeightUnit};
+				--line-color: ${_a.defaultStyle.lineColor};
+				--border-radius: ${_a.defaultStyle.borderRadiusValue}${_a.defaultStyle.borderRadiusUnit};
+				--border-width: ${_a.defaultStyle.borderWidthValue}${_a.defaultStyle.borderWidthUnit};
+				--border-style: ${_a.defaultStyle.borderStyle};
+				--border-color: ${_a.defaultStyle.borderColor};
+				--padding-block: ${_a.defaultStyle.paddingBlockValue}${_a.defaultStyle.paddingBlockUnit};
+				--padding-inline: ${_a.defaultStyle.paddingInlineValue}${_a.defaultStyle.paddingInlineUnit};
+				container: hamburger-menu / inline-size;
+				display: block;
+				inline-size: 5em;
+				block-size: 5em;
+			}
+			button {
+				display: block;
+				width: 100%;
+				height: 100%;
+				border: none;
+				background: none;
+				padding: 0;
+				margin: 0;
+				cursor: pointer;
+				border-radius: var(--border-radius);
+				border: var(--border-width) var(--border-style, solid) var(--border-color);
+				overflow: hidden;
+				appearance: none;
+				-webkit-appearance: none;
+				-moz-appearance: none;
+				-ms-appearance: none;
+
+				> span {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+					align-items: center;
+					width: 100%;
+					height: 100%;
+					padding: var(--padding-block) var(--padding-inline);
+
+					> span {
+						display: block;
+						width: var(--line-width);
+						max-width: 100%;
+						height: var(--line-height);
+						flex: 0 0 var(--line-height);
+						background-color: var(--line-color);
+					}
+				}
+			}
+		</style>
+		<button type="button" aria-label="メニュー" command="show-modal">
+			<span>
+				${Array.from({ length: this.#lineCount })
+            .map(() => `<span></span>`)
+            .join('')}
+			</span>
+		</button>
+		<slot></slot>
+	`;
+        this.#button = this.shadowRoot.querySelector('button');
+        this.#slot = this.shadowRoot.querySelector('slot');
+        this.connectedCallback();
+    }
+    static defaultStyle = Object.freeze({
+        lineCount: 3,
+        lineWidthValue: 80,
+        lineWidthUnit: 'cqi',
+        lineHeightValue: 2,
+        lineHeightUnit: 'px',
+        lineColor: 'currentColor',
+        borderRadiusValue: 0,
+        borderRadiusUnit: 'px',
+        borderWidthValue: 1,
+        borderWidthUnit: 'px',
+        borderStyle: 'solid',
+        borderColor: 'currentColor',
+        paddingBlockValue: 25,
+        paddingBlockUnit: 'cqi',
+        paddingInlineValue: 20,
+        paddingInlineUnit: 'cqi',
+    });
+}
+_a = HamburgerMenu;
+/**
+ *
+ * @param prefix
+ */
+export function defineHamburgerMenu(prefix) {
+    const tagName = `${prefix}-hamburger-menu`;
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, HamburgerMenu);
+    }
+    return tagName;
+}

package/dist/hamburger-menu.stories.d.ts

@@ -0,0 +1,126 @@
+import type { StoryObj } from '@storybook/web-components';
+import { HamburgerMenu } from './hamburger-menu.js';
+declare const meta: {
+    title: string;
+    component: string;
+    argTypes: {
+        lineCount: {
+            control: "number";
+            name: string;
+            description: string;
+            defaultValue: 3;
+            min: number;
+        };
+        lineColor: {
+            control: "color";
+            name: string;
+            description: string;
+            defaultValue: "currentColor";
+        };
+        lineWidthValue: {
+            control: "number";
+            name: string;
+            description: string;
+            defaultValue: 80;
+            step: number;
+            min: number;
+        };
+        lineWidthUnit: {
+            control: "select";
+            name: string;
+            options: readonly ["em", "px", "rem", "cqi", "%"];
+            description: string;
+            defaultValue: "cqi";
+        };
+        lineHeightValue: {
+            control: "number";
+            name: string;
+            description: string;
+            defaultValue: 2;
+            step: number;
+            min: number;
+        };
+        lineHeightUnit: {
+            control: "select";
+            name: string;
+            options: readonly ["em", "px", "rem", "cqi", "%"];
+            description: string;
+            defaultValue: "px";
+        };
+        borderRadiusValue: {
+            control: "number";
+            name: string;
+            description: string;
+            defaultValue: 0;
+            min: number;
+        };
+        borderRadiusUnit: {
+            control: "select";
+            name: string;
+            options: readonly ["em", "px", "rem", "cqi", "%"];
+            description: string;
+            defaultValue: "px";
+        };
+        borderWidthValue: {
+            control: "number";
+            name: string;
+            description: string;
+            defaultValue: 1;
+            min: number;
+        };
+        borderWidthUnit: {
+            control: "select";
+            name: string;
+            options: readonly ["em", "px", "rem", "cqi", "%"];
+            description: string;
+            defaultValue: "px";
+        };
+        borderStyle: {
+            control: "select";
+            name: string;
+            options: readonly ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"];
+            description: string;
+            defaultValue: "solid";
+        };
+        borderColor: {
+            control: "color";
+            name: string;
+            description: string;
+            defaultValue: "currentColor";
+        };
+        paddingBlockValue: {
+            control: "number";
+            name: string;
+            description: string;
+            defaultValue: 25;
+            min: number;
+        };
+        paddingBlockUnit: {
+            control: "select";
+            name: string;
+            options: readonly ["em", "px", "rem", "cqi", "%"];
+            description: string;
+            defaultValue: "cqi";
+        };
+        paddingInlineValue: {
+            control: "number";
+            name: string;
+            description: string;
+            defaultValue: 20;
+            min: number;
+        };
+        paddingInlineUnit: {
+            control: "select";
+            name: string;
+            options: readonly ["em", "px", "rem", "cqi", "%"];
+            description: string;
+            defaultValue: "cqi";
+        };
+    };
+    render(args: import("@storybook/web-components").Args): HamburgerMenu;
+};
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Pattern01: Story;
+//# sourceMappingURL=hamburger-menu.stories.d.ts.map

package/dist/hamburger-menu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hamburger-menu.stories.d.ts","sourceRoot":"","sources":["../src/hamburger-menu.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,EAAuB,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAMzE,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiKM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAMtB,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAC"}

package/dist/hamburger-menu.stories.js

@@ -0,0 +1,168 @@
+import { defineHamburgerMenu, HamburgerMenu } from './hamburger-menu.js';
+import { lengthUnits, borderStyles } from './style-values.js';
+// Define the custom element with a prefix upfront
+const tagName = defineHamburgerMenu('x'); // Use 'x' as prefix
+const meta = {
+    title: 'Components/HamburgerMenu',
+    component: tagName,
+    argTypes: {
+        lineCount: {
+            control: 'number',
+            name: 'line-count',
+            description: 'ハンバーガーメニューの線の数',
+            defaultValue: HamburgerMenu.defaultStyle.lineCount,
+            min: 1,
+        },
+        lineColor: {
+            control: 'color',
+            name: '--line-color',
+            description: 'ハンバーガーメニューの線の色',
+            defaultValue: HamburgerMenu.defaultStyle.lineColor,
+        },
+        // --line-width
+        lineWidthValue: {
+            control: 'number',
+            name: '--line-width (数値)',
+            description: '線の幅（数値部分）',
+            defaultValue: HamburgerMenu.defaultStyle.lineWidthValue,
+            step: 0.1, // 細かい調整用
+            min: 0,
+        },
+        lineWidthUnit: {
+            control: 'select',
+            name: '--line-width (単位)',
+            options: lengthUnits,
+            description: '線の幅（単位）',
+            defaultValue: HamburgerMenu.defaultStyle.lineWidthUnit,
+        },
+        // --line-height
+        lineHeightValue: {
+            control: 'number',
+            name: '--line-height (数値)',
+            description: '線の高さ（数値部分）',
+            defaultValue: HamburgerMenu.defaultStyle.lineHeightValue,
+            step: 1,
+            min: 0,
+        },
+        lineHeightUnit: {
+            control: 'select',
+            name: '--line-height (単位)',
+            options: lengthUnits,
+            description: '線の高さ（単位）',
+            defaultValue: HamburgerMenu.defaultStyle.lineHeightUnit,
+        },
+        borderRadiusValue: {
+            control: 'number',
+            name: '--border-radius (数値)',
+            description: '外枠の角丸（数値部分）',
+            defaultValue: HamburgerMenu.defaultStyle.borderRadiusValue,
+            min: 0,
+        },
+        borderRadiusUnit: {
+            control: 'select',
+            name: '--border-radius (単位)',
+            options: lengthUnits,
+            description: '外枠の角丸（単位）',
+            defaultValue: HamburgerMenu.defaultStyle.borderRadiusUnit,
+        },
+        borderWidthValue: {
+            control: 'number',
+            name: '--border-width (数値)',
+            description: '外枠の線の太さ（数値部分）',
+            defaultValue: HamburgerMenu.defaultStyle.borderWidthValue,
+            min: 0,
+        },
+        borderWidthUnit: {
+            control: 'select',
+            name: '--border-width (単位)',
+            options: lengthUnits,
+            description: '外枠の線の太さ（単位）',
+            defaultValue: HamburgerMenu.defaultStyle.borderWidthUnit,
+        },
+        borderStyle: {
+            control: 'select',
+            name: '--border-style',
+            options: borderStyles,
+            description: '外枠の線の種類',
+            defaultValue: HamburgerMenu.defaultStyle.borderStyle,
+        },
+        borderColor: {
+            control: 'color',
+            name: '--border-color',
+            description: '外枠の線の色',
+            defaultValue: HamburgerMenu.defaultStyle.borderColor,
+        },
+        paddingBlockValue: {
+            control: 'number',
+            name: '--padding-block (数値)',
+            description: 'パディングの上下（数値部分）',
+            defaultValue: HamburgerMenu.defaultStyle.paddingBlockValue,
+            min: 0,
+        },
+        paddingBlockUnit: {
+            control: 'select',
+            name: '--padding-block (単位)',
+            options: lengthUnits,
+            description: 'パディングの上下（単位）',
+            defaultValue: HamburgerMenu.defaultStyle.paddingBlockUnit,
+        },
+        paddingInlineValue: {
+            control: 'number',
+            name: '--padding-inline (数値)',
+            description: 'パディングの左右（数値部分）',
+            defaultValue: HamburgerMenu.defaultStyle.paddingInlineValue,
+            min: 0,
+        },
+        paddingInlineUnit: {
+            control: 'select',
+            name: '--padding-inline (単位)',
+            options: lengthUnits,
+            description: 'パディングの左右（単位）',
+            defaultValue: HamburgerMenu.defaultStyle.paddingInlineUnit,
+        },
+    },
+    render(args) {
+        const element = document.createElement(tagName);
+        element.lineCount = args.lineCount;
+        element.style.setProperty('--line-color', args.lineColor);
+        element.style.setProperty('--line-width', `${args.lineWidthValue}${args.lineWidthUnit}`);
+        element.style.setProperty('--line-h	eight', `${args.lineHeightValue}${args.lineHeightUnit}`);
+        element.style.setProperty('--border-radius', `${args.borderRadiusValue}${args.borderRadiusUnit}`);
+        element.style.setProperty('--border-width', `${args.borderWidthValue}${args.borderWidthUnit}`);
+        element.style.setProperty('--border-style', args.borderStyle);
+        element.style.setProperty('--border-color', args.borderColor);
+        element.style.setProperty('--padding-block', `${args.paddingBlockValue}${args.paddingBlockUnit}`);
+        element.style.setProperty('--padding-inline', `${args.paddingInlineValue}${args.paddingInlineUnit}`);
+        element.innerHTML = `
+	<dialog>
+		<h1>メニュー</h1>
+		<ul>
+			<li><a href="#">項目1</a></li>
+			<li><a href="#">項目2</a></li>
+		</ul>
+		<button command="close">閉じる</button>
+	</dialog>
+`;
+        return element;
+    },
+};
+export default meta;
+const defaultArgs = Object.fromEntries(Object.entries(meta.argTypes).map(([key, value]) => [key, value.defaultValue]));
+export const Default = {
+    args: defaultArgs,
+};
+export const Pattern01 = {
+    args: {
+        ...defaultArgs,
+        lineCount: 2,
+        lineWidthValue: 100,
+        lineHeightValue: 6,
+        borderRadiusValue: 5,
+        borderWidthValue: 1,
+        borderColor: '#000',
+        paddingBlockValue: 32,
+        paddingBlockUnit: 'cqi',
+        paddingInlineValue: 20,
+        paddingInlineUnit: 'cqi',
+    },
+};

package/dist/style-values.d.ts

@@ -0,0 +1,5 @@
+export declare const lengthUnits: readonly ["em", "px", "rem", "cqi", "%"];
+export type LengthUnit = (typeof lengthUnits)[number];
+export declare const borderStyles: readonly ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset"];
+export type BorderStyle = (typeof borderStyles)[number];
+//# sourceMappingURL=style-values.d.ts.map

package/dist/style-values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-values.d.ts","sourceRoot":"","sources":["../src/style-values.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,0CAA2C,CAAC;AAEpE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,eAAO,MAAM,YAAY,wFASf,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/style-values.js

@@ -0,0 +1,11 @@
+export const lengthUnits = ['em', 'px', 'rem', 'cqi', '%'];
+export const borderStyles = [
+    'solid',
+    'dashed',
+    'dotted',
+    'double',
+    'groove',
+    'ridge',
+    'inset',
+    'outset',
+];

package/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "@d-zero/custom-components",
+	"version": "5.0.0-alpha.45",
+	"description": "D-ZERO custom components",
+	"author": "D-ZERO",
+	"license": "MIT",
+	"repository": {
+		"url": "https://github.com/d-zero-dev/frontend-env.git"
+	},
+	"private": false,
+	"publishConfig": {
+		"access": "public"
+	},
+	"type": "module",
+	"exports": {
+		"./hamburger-menu": {
+			"import": "./dist/hamburger-menu.js",
+			"types": "./dist/hamburger-menu.d.ts"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsc --project tsconfig.build.json",
+		"dev": "storybook dev -p 6006",
+		"storybook": "storybook build"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "3.2.6",
+		"@storybook/addon-essentials": "8.6.12",
+		"@storybook/blocks": "8.6.12",
+		"@storybook/experimental-addon-test": "8.6.12",
+		"@storybook/test": "8.6.12",
+		"@storybook/web-components": "8.6.12",
+		"@storybook/web-components-vite": "8.6.12",
+		"lit": "3.2.1",
+		"storybook": "8.6.12"
+	},
+	"gitHead": "8f9a1746509e90c061511b19f028c758754b394f"
+}