@simplysm/angular 14.0.30 → 14.0.33

package/src/features/editor/useTiptapToolbar.ts

@@ -0,0 +1,179 @@
+import { signal, type Signal, type WritableSignal } from "@angular/core";
+import type { Editor } from "@tiptap/core";
+
+export interface TiptapActiveStates {
+  h1: boolean;
+  h2: boolean;
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strike: boolean;
+  bulletList: boolean;
+  orderedList: boolean;
+  blockquote: boolean;
+  codeBlock: boolean;
+  alignLeft: boolean;
+  alignCenter: boolean;
+  alignRight: boolean;
+  alignJustify: boolean;
+}
+
+export const DEFAULT_ACTIVE_STATES: TiptapActiveStates = {
+  h1: false,
+  h2: false,
+  bold: false,
+  italic: false,
+  underline: false,
+  strike: false,
+  bulletList: false,
+  orderedList: false,
+  blockquote: false,
+  codeBlock: false,
+  alignLeft: false,
+  alignCenter: false,
+  alignRight: false,
+  alignJustify: false,
+};
+
+interface TiptapToolbarOptions {
+  editor: Signal<Editor | undefined>;
+}
+
+export function useTiptapToolbar(opt: TiptapToolbarOptions): {
+  activeStates: WritableSignal<TiptapActiveStates>;
+  activeColor: WritableSignal<string>;
+  activeBgColor: WritableSignal<string>;
+  colorPickerMode: WritableSignal<"text" | "bg" | undefined>;
+  execCmd: (cmd: string) => void;
+  refreshActiveStates: () => void;
+  toggleColorPicker: (mode: "text" | "bg") => void;
+  applyColor: (color: string | undefined) => void;
+} {
+  const activeStates: WritableSignal<TiptapActiveStates> = signal(DEFAULT_ACTIVE_STATES);
+  const activeColor = signal("");
+  const activeBgColor = signal("");
+  const colorPickerMode = signal<"text" | "bg" | undefined>(undefined);
+
+  function execCmd(cmd: string): void {
+    const ed = opt.editor();
+    if (ed == null) return;
+
+    const chain = ed.chain().focus();
+    switch (cmd) {
+      case "bold":
+        chain.toggleBold().run();
+        break;
+      case "italic":
+        chain.toggleItalic().run();
+        break;
+      case "underline":
+        chain.toggleUnderline().run();
+        break;
+      case "strike":
+        chain.toggleStrike().run();
+        break;
+      case "h1":
+        chain.toggleHeading({ level: 1 }).run();
+        break;
+      case "h2":
+        chain.toggleHeading({ level: 2 }).run();
+        break;
+      case "bulletList":
+        chain.toggleBulletList().run();
+        break;
+      case "orderedList":
+        chain.toggleOrderedList().run();
+        break;
+      case "indent":
+        chain.sinkListItem("listItem").run();
+        break;
+      case "outdent":
+        chain.liftListItem("listItem").run();
+        break;
+      case "blockquote":
+        chain.toggleBlockquote().run();
+        break;
+      case "codeBlock":
+        chain.toggleCodeBlock().run();
+        break;
+      case "alignLeft":
+        chain.setTextAlign("left").run();
+        break;
+      case "alignCenter":
+        chain.setTextAlign("center").run();
+        break;
+      case "alignRight":
+        chain.setTextAlign("right").run();
+        break;
+      case "alignJustify":
+        chain.setTextAlign("justify").run();
+        break;
+      case "clean":
+        chain.clearNodes().unsetAllMarks().run();
+        break;
+    }
+  }
+
+  function refreshActiveStates(): void {
+    const ed = opt.editor();
+    if (ed == null) return;
+    activeStates.set({
+      bold: ed.isActive("bold"),
+      italic: ed.isActive("italic"),
+      underline: ed.isActive("underline"),
+      strike: ed.isActive("strike"),
+      h1: ed.isActive("heading", { level: 1 }),
+      h2: ed.isActive("heading", { level: 2 }),
+      bulletList: ed.isActive("bulletList"),
+      orderedList: ed.isActive("orderedList"),
+      blockquote: ed.isActive("blockquote"),
+      codeBlock: ed.isActive("codeBlock"),
+      alignLeft: ed.isActive({ textAlign: "left" }),
+      alignCenter: ed.isActive({ textAlign: "center" }),
+      alignRight: ed.isActive({ textAlign: "right" }),
+      alignJustify: ed.isActive({ textAlign: "justify" }),
+    });
+
+    const textColor = ed.getAttributes("textStyle")["color"];
+    activeColor.set(typeof textColor === "string" ? textColor : "");
+    const bgColor = ed.getAttributes("highlight")["color"];
+    activeBgColor.set(typeof bgColor === "string" ? bgColor : "");
+  }
+
+  function toggleColorPicker(mode: "text" | "bg"): void {
+    colorPickerMode.set(colorPickerMode() === mode ? undefined : mode);
+  }
+
+  function applyColor(color: string | undefined): void {
+    const ed = opt.editor();
+    if (ed == null) return;
+
+    const chain = ed.chain().focus();
+    const mode = colorPickerMode();
+    if (mode === "text") {
+      if (color !== undefined) {
+        chain.setColor(color).run();
+      } else {
+        chain.unsetColor().run();
+      }
+    } else if (mode === "bg") {
+      if (color !== undefined) {
+        chain.setHighlight({ color }).run();
+      } else {
+        chain.unsetHighlight().run();
+      }
+    }
+    colorPickerMode.set(undefined);
+  }
+
+  return {
+    activeStates,
+    activeColor,
+    activeBgColor,
+    colorPickerMode,
+    execCmd,
+    refreshActiveStates,
+    toggleColorPicker,
+    applyColor,
+  };
+}

package/src/features/theme/sd-theme-provider.ts

@@ -0,0 +1,40 @@
+import { effect, Injectable, signal } from "@angular/core";
+
+@Injectable({ providedIn: "root" })
+export class SdThemeProvider {
+  dark = signal<boolean>(false);
+
+  readonly fontSizePresets: readonly number[] = [12, 14, 16, 20, 24, 28];
+
+  fontSize = signal<number>(12);
+
+  constructor() {
+    effect(() => {
+      document.body.classList.toggle("sd-theme-dark", this.dark());
+    });
+
+    effect(() => {
+      document.documentElement.style.fontSize = `${this.fontSize()}px`;
+    });
+  }
+
+  increaseFontSize(): void {
+    const next = this.fontSizePresets.find((v) => v > this.fontSize());
+    if (next != null) {
+      this.fontSize.set(next);
+    }
+  }
+
+  decreaseFontSize(): void {
+    const curr = this.fontSize();
+    let prev: number | undefined;
+    for (const v of this.fontSizePresets) {
+      if (v < curr) {
+        prev = v;
+      }
+    }
+    if (prev != null) {
+      this.fontSize.set(prev);
+    }
+  }
+}

package/src/features/theme/sd-theme-selector.ts

@@ -0,0 +1,75 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  ViewEncapsulation,
+} from "@angular/core";
+import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
+import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
+import { SdButton } from "../../controls/button/sd-button";
+import { SdSwitch } from "../../controls/checkbox/sd-switch";
+import { NgIcon } from "@ng-icons/core";
+import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
+import { SdThemeProvider } from "./sd-theme-provider";
+
+@Component({
+  selector: "sd-theme-selector",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon],
+  template: `
+    <sd-dropdown>
+      <sd-button [inline]="true" [theme]="'link-gray'">
+        <ng-icon [svg]="icons.tablerPalette" />
+      </sd-button>
+      <sd-dropdown-popup>
+        <div class="p-default">
+          <div class="flex-row gap-sm cross-align-center">
+            <span>글자 크기</span>
+            <div class="flex-row gap-xs cross-align-center">
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMinFontSize()"
+                (click)="sdTheme.decreaseFontSize()"
+              >
+                <ng-icon [svg]="icons.tablerMinus" />
+              </sd-button>
+              <span>{{ sdTheme.fontSize() }}px</span>
+              <sd-button
+                [inline]="true"
+                [theme]="'link-gray'"
+                [size]="'sm'"
+                [disabled]="isMaxFontSize()"
+                (click)="sdTheme.increaseFontSize()"
+              >
+                <ng-icon [svg]="icons.tablerPlus" />
+              </sd-button>
+            </div>
+          </div>
+          <div class="flex-row gap-sm cross-align-center">
+            <span>다크 모드</span>
+            <sd-switch [(value)]="sdTheme.dark" />
+          </div>
+        </div>
+      </sd-dropdown-popup>
+    </sd-dropdown>
+  `,
+  styles: [],
+})
+export class SdThemeSelector {
+  protected readonly icons = { tablerPalette, tablerMinus, tablerPlus };
+  protected readonly sdTheme = inject(SdThemeProvider);
+
+  protected readonly isMinFontSize = computed(
+    () => this.sdTheme.fontSize() <= this.sdTheme.fontSizePresets[0],
+  );
+
+  protected readonly isMaxFontSize = computed(
+    () =>
+      this.sdTheme.fontSize() >= this.sdTheme.fontSizePresets[this.sdTheme.fontSizePresets.length - 1],
+  );
+}

package/src/features/visual/sd-calendar.ts

@@ -0,0 +1,188 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  input,
+  TemplateRef,
+  ViewEncapsulation,
+} from "@angular/core";
+import { DateOnly } from "@simplysm/core-common";
+import { FormatPipe } from "../../core/format.pipe";
+import {
+  type SdItemOfTemplateContext,
+  SdItemOfTemplate,
+} from "../../core/template/sd-item-of-template";
+import { NgTemplateOutlet } from "@angular/common";
+
+@Component({
+  selector: "sd-calendar",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [FormatPipe, NgTemplateOutlet],
+  template: `
+    <table>
+      <thead>
+        <tr>
+          <th>
+            {{ weeks[weekStartDay() % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 1) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 2) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 3) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 4) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 5) % 7] }}
+          </th>
+          <th>
+            {{ weeks[(weekStartDay() + 6) % 7] }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (row of dataTable(); let r = $index; track r) {
+          <tr>
+            @for (data of row; let c = $index; track c) {
+              <td [class.not-current]="data.date.month !== yearMonth().month">
+                <div class="day">
+                  {{ data.date | format: "d" }}
+                </div>
+                <div class="content">
+                  @for (item of data.items; track $index) {
+                    <ng-template
+                      [ngTemplateOutlet]="itemTplRef()"
+                      [ngTemplateOutletContext]="{
+                        $implicit: item,
+                        item: item,
+                        index: r * 7 + c,
+                        depth: 0,
+                      }"
+                    ></ng-template>
+                  }
+                </div>
+              </td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
+  `,
+  styles: [
+    /* language=SCSS */ `
+      @use "../../../scss/commons/mixins";
+
+      sd-calendar {
+        > table {
+          border-collapse: collapse;
+          width: 100%;
+          height: 100%;
+          border-radius: var(--border-radius-default);
+          overflow: hidden;
+
+          > * > tr > * {
+            padding: var(--gap-sm) var(--gap-default);
+            border: 1px solid var(--theme-gray-light);
+
+            width: calc(100% / 7);
+          }
+
+          > thead > tr > th {
+            background: var(--theme-gray-lighter);
+            height: 10%;
+          }
+
+          > tbody > tr > td {
+            vertical-align: top;
+            height: 15%;
+
+            > .day {
+              margin-bottom: var(--gap-sm);
+            }
+
+            &.not-current {
+              background: var(--theme-gray-lightest);
+
+              > .day {
+                color: var(--theme-gray-default);
+              }
+            }
+
+            > .content {
+              display: flex;
+              flex-wrap: nowrap;
+
+              @include mixins.flex-direction(column, var(--gap-sm));
+            }
+          }
+        }
+      }
+    `,
+  ],
+})
+export class SdCalendar<T> {
+  items = input.required<T[]>();
+  getItemDateFn = input.required<(item: T, index: number) => DateOnly>();
+
+  yearMonth = input(new DateOnly().setDay(1));
+
+  itemTplRef = contentChild.required<any, TemplateRef<SdItemOfTemplateContext<T>>>(
+    SdItemOfTemplate,
+    { read: TemplateRef },
+  );
+
+  weekStartDay = input(0);
+  minDaysInFirstWeek = input(1);
+
+  weeks = ["일", "월", "화", "수", "목", "금", "토"];
+
+  dataTable = computed(() => {
+    const result: {
+      date: DateOnly;
+      items: T[];
+    }[][] = [];
+
+    // Build a Map<tick, T[]> once for O(1) lookup per cell
+    const itemsByTick = new Map<number, T[]>();
+    const getDateFn = this.getItemDateFn();
+    for (let i = 0; i < this.items().length; i++) {
+      const item = this.items()[i];
+      const tick = getDateFn(item, i).tick;
+      const arr = itemsByTick.get(tick);
+      if (arr !== undefined) {
+        arr.push(item);
+      } else {
+        itemsByTick.set(tick, [item]);
+      }
+    }
+
+    const firstDate = this.yearMonth().getWeekSeqStartDate(
+      this.weekStartDay(),
+      this.minDaysInFirstWeek(),
+    );
+    for (let r = 0; r < 6; r++) {
+      const row: {
+        date: DateOnly;
+        items: T[];
+      }[] = [];
+      for (let c = 0; c < 7; c++) {
+        const date = firstDate.addDays(r * 7 + c);
+        row.push({
+          date,
+          items: itemsByTick.get(date.tick) ?? [],
+        });
+      }
+      result.push(row);
+    }
+
+    return result;
+  });
+}