diff --git a/package.json b/package.json index 86757a0..11233ec 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,8 @@ "sealgen": { "styleDirs": [ "node_modules/@sealcode/jdd-editor/assets", - "node_modules/@sealcode/sortable/src/stimulus-styles" + "node_modules/@sealcode/sortable/src/stimulus-styles", + "node_modules/@sealcode/show-first-row/src/styles" ], "controllerDirs": [ "node_modules/@sealcode/jdd-editor/src/controllers", diff --git a/src/back/routes/common/show-first-row/show-first-row.css b/src/back/routes/common/show-first-row/show-first-row.css deleted file mode 100644 index e7ede82..0000000 --- a/src/back/routes/common/show-first-row/show-first-row.css +++ /dev/null @@ -1,49 +0,0 @@ -.show-first-row { - container-type: inline-size; - text-align: center; - width: 100%; - - .show-first-row__items { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr)); - justify-content: center; - gap: var(--column-gap); - transition: row-gap 200ms, overflow 200ms; - overflow: hidden; - - .show-first-row__checkbox:not(:checked) + & { - row-gap: 0; - } - - & > * { - align-self: center; - justify-self: center; - } - } - - .show-first-row__default-button { - background: blue; - color: white; - height: 40px; - display: inline-block; - padding: 0 20px; - line-height: 40px; - cursor: pointer; - margin: 0 auto; - margin-top: 20px; - } - - .show-first-row__show-less-button { - display: none; - } - - &:has(input:checked) { - .show-first-row__show-less-button { - display: block; - } - - .show-first-row__show-more-button { - display: none; - } - } -} diff --git a/src/back/routes/common/show-first-row/show-first-row.tsx b/src/back/routes/common/show-first-row/show-first-row.tsx deleted file mode 100644 index 0a9ad20..0000000 --- a/src/back/routes/common/show-first-row/show-first-row.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import { TempstreamJSX } from "tempstream"; -import type { FlatTemplatable } from "tempstream"; - -const showFirstRowIds = (function* () { - let i = 0; - while (true) { - yield i++; - if (i == 999999999) { - i = 0; - } - } -})(); - -function min_container_width(columns: number, column_width: number, gap: number) { - return columns * column_width + (columns - 1) * gap; -} - -export async function showFirstRow({ - items, - min_column_width_px = 250, - column_gap_px = 10, - row_gap_px = column_gap_px, - make_show_more_button = () => ( - Show more - ), - make_show_less_button = () => ( - Show less - ), - add_button_to_content = (content, show_more_button, show_less_button) => ( - <> - {content} - {show_more_button} - {show_less_button} - - ), - classes = [], - how_many_rows = () => 1, -}: { - items: FlatTemplatable[]; - min_column_width_px?: number; - make_show_more_button?: () => JSX.Element; - make_show_less_button?: () => JSX.Element; - column_gap_px?: number; - row_gap_px?: number; - add_button_to_content?: ( - content: JSX.Element, - show_more_button: JSX.Element, - show_less_button: JSX.Element - ) => JSX.Element; - classes?: classNames.ArgumentArray; - how_many_rows?: (columns_count: number) => number; -}): Promise { - const id = showFirstRowIds.next().value; - const checkbox_id = "show-first-row__checkbox--" + id; - return ( -
- {[1, 2, 3, 4, 5, 6, 7, 8, 9] - .reverse() - .map((columns) => { - const rows = how_many_rows(columns); - return /* HTML */ ``; - }) - .join("\n")} - - {add_button_to_content( -
{items}
, - , - - )} -
- ); -} diff --git a/src/back/routes/demos/show-first-row.css b/src/back/routes/demos/show-first-row.css new file mode 100644 index 0000000..506eba4 --- /dev/null +++ b/src/back/routes/demos/show-first-row.css @@ -0,0 +1,4 @@ +.show-first-row .show-first-row__default-button { + background-color: var(--color-brand-accent); + color: var(--color-brand-text-on-accent); +} diff --git a/src/back/routes/demos/show-first-row.page.tsx b/src/back/routes/demos/show-first-row.page.tsx index 9b6e085..299d9d4 100644 --- a/src/back/routes/demos/show-first-row.page.tsx +++ b/src/back/routes/demos/show-first-row.page.tsx @@ -2,14 +2,14 @@ import type { Context } from "koa"; import { TempstreamJSX } from "tempstream"; import { Page } from "@sealcode/sealgen"; import html from "../../html.js"; -import { showFirstRow } from "../common/show-first-row/show-first-row.js"; +import { showFirstRow } from "@sealcode/show-first-row"; export const actionName = "ShowFirstRowDemo"; function makeBoxStyle() { return `width: 100%; max-width: 200px; height: ${ 100 + Math.random() * 100 - }px; background-color: lime; text-align: center; color: #0000009e; font-size: 40px; padding-top: 20px; box-sizing: border-box;`; + }px; background-color: var(--color-brand-accent2); text-align: center; color: #0000009e; font-size: 40px; padding-top: 20px; box-sizing: border-box;`; } export default new (class ShowFirstRowDemoPage extends Page { diff --git a/src/front/controllers.ts b/src/front/controllers.ts index 687c92f..107a8e8 100644 --- a/src/front/controllers.ts +++ b/src/front/controllers.ts @@ -49,6 +49,9 @@ application.register("submit-on-input", SubmitOnInput); import { default as Toast } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/toast.stimulus.js"; application.register("toast", Toast); +import { default as PasswordGenerateButton } from "./../../node_modules/@sealcode/sealgen/src/controllers/password-generate-button.stimulus.js"; +application.register("password-generate-button", PasswordGenerateButton); + import { default as TableAddButton } from "./../../node_modules/@sealcode/sealgen/src/controllers/table-add-button.stimulus.js"; application.register("table-add-button", TableAddButton);