@shzlx/ui-default 4.58.2

package/components/datepicker/datepicker.page.tsx

@@ -0,0 +1,94 @@
+import 'flatpickr/dist/flatpickr.min.css';
+
+import flatpickr from 'flatpickr';
+import $ from 'jquery';
+import { AutoloadPage } from 'vj/misc/Page';
+
+function padTwo(n: number) {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+
+function initTimePicker(input: HTMLInputElement) {
+  const $input = $(input);
+  const interval = 15;
+  const $wrapper = $('<div>').css({ position: 'relative', display: 'inline-block', width: '100%' });
+  $input.wrap($wrapper);
+
+  const $dropdown = $('<div>').css({
+    position: 'absolute',
+    top: $input.outerHeight(),
+    left: 0,
+    right: 0,
+    maxHeight: 0,
+    overflowY: 'auto',
+    background: 'var(--bg-color, #fff)',
+    border: '1px solid #ccc',
+    borderTop: 'none',
+    borderRadius: '0 0 4px 4px',
+    zIndex: 1000,
+    opacity: 0,
+    boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
+    transition: 'max-height .2s ease, opacity .2s ease',
+    pointerEvents: 'none',
+  }).addClass('time-picker-dropdown');
+
+  for (let h = 0; h < 24; h++) {
+    for (let m = 0; m < 60; m += interval) {
+      const time = `${padTwo(h)}:${padTwo(m)}`;
+      const $item = $('<div>').text(time).css({
+        padding: '6px 12px',
+        cursor: 'pointer',
+      }).on('mousedown', (e) => {
+        e.preventDefault();
+        $input.val(time).trigger('change');
+        closeDropdown(); // eslint-disable-line ts/no-use-before-define
+      }).on('mouseenter', function () {
+        $(this).css('background', 'var(--highlight-color, #e8f0fe)');
+      }).on('mouseleave', function () {
+        $(this).css('background', '');
+      });
+      $dropdown.append($item);
+    }
+  }
+
+  let isOpen = false;
+
+  function openDropdown() {
+    if (isOpen) return;
+    isOpen = true;
+    $dropdown.css({ maxHeight: '200px', opacity: 1, pointerEvents: 'auto' });
+    const val = $input.val() as string;
+    if (val) {
+      $dropdown.children().each(function cb() {
+        if ($(this).text() !== val) return;
+        const el = this as HTMLElement;
+        el.parentElement!.scrollTop = el.offsetTop - el.parentElement!.offsetTop - 80;
+      });
+    }
+  }
+
+  function closeDropdown() {
+    if (!isOpen) return;
+    isOpen = false;
+    $dropdown.css({ maxHeight: 0, opacity: 0, pointerEvents: 'none' });
+  }
+
+  $input.after($dropdown);
+  $input.on('focus', openDropdown);
+  // Only close when the element actually loses focus within the page,
+  // not when the whole window loses focus (alt-tab)
+  $input.on('blur', () => {
+    if (document.hasFocus()) closeDropdown();
+  });
+}
+
+const datepickerPage = new AutoloadPage('datepickerPage', async () => {
+  $('[data-pick-date]').each(function () {
+    flatpickr(this, { allowInput: true });
+  });
+  $('[data-pick-time]').each(function () {
+    initTimePicker(this as HTMLInputElement);
+  });
+});
+
+export default datepickerPage;

package/components/dialog/DomDialog.ts

@@ -0,0 +1,145 @@
+import $ from 'jquery';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import { zIndexManager } from 'vj/utils';
+
+export interface DialogOptions {
+  classes: string;
+  $body: HTMLElement | JQuery<HTMLElement> | string;
+  $action: any;
+  width?: string;
+  height?: string;
+  cancelByClickingBack?: boolean;
+  cancelByEsc?: boolean;
+  canCancel?: boolean;
+  onDispatch?: (data: any) => any;
+}
+
+export default class DomDialog extends DOMAttachedObject {
+  static DOMAttachKey = 'vjDomDialogInstance';
+  isShown = false;
+  isAnimating = false;
+  options: DialogOptions;
+  _resolve: (value: string | PromiseLike<string>) => void;
+
+  constructor($dom, options: Partial<DialogOptions> = {}) {
+    super($dom);
+    this.options = {
+      cancelByClickingBack: false,
+      cancelByEsc: false,
+      onDispatch: () => { },
+      ...options as any,
+    };
+  }
+
+  async _show() {
+    this.$dom.css('z-index', zIndexManager.getNext());
+    this.$dom.trigger('vjDomDialogShow');
+    this.isAnimating = true;
+
+    if (this.options.cancelByClickingBack) {
+      this.$dom.on(`click.${this.eventNS}`, this.handleClick.bind(this));
+    }
+    if (this.options.cancelByEsc) {
+      $(document).on(`keyup.${this.eventNS}`, this.handleKeyUp.bind(this));
+    }
+
+    const $wrap = this.$dom;
+    $wrap.css({
+      display: 'flex',
+      opacity: 0,
+    });
+    $wrap.width();
+    $wrap.transition(
+      { opacity: 1 },
+      {
+        duration: 100,
+        easing: 'easeOutCubic',
+      },
+    );
+
+    const $dgContent = this.$dom.find('.dialog__content');
+    $dgContent.css({ scale: 0.8 });
+    $dgContent.trigger('vjContentNew');
+    await $dgContent
+      .transition({
+        scale: 1,
+      }, {
+        duration: 200,
+        easing: 'easeOutCubic',
+      })
+      .promise();
+
+    this.$dom.find('[data-autofocus]').focus();
+
+    this.isShown = true;
+    this.isAnimating = false;
+    this.$dom.trigger('vjDomDialogShown');
+  }
+
+  async _hide() {
+    this.$dom.trigger('vjDomDialogHide');
+    this.isAnimating = true;
+
+    $(document).off(`keyup.${this.eventNS}`);
+    this.$dom.off(`click.${this.eventNS}`);
+
+    this.$dom.css({ opacity: 1 });
+    this.$dom.transition({
+      opacity: 0,
+    }, {
+      duration: 200,
+    });
+
+    const $dgContent = this.$dom.find('.dialog__content');
+    $dgContent.css({ scale: 1 });
+    await $dgContent
+      .transition(
+        { scale: 0.8 },
+        {
+          duration: 200,
+          easing: 'easeOutCubic',
+        },
+      ).promise();
+
+    this.$dom.css('display', 'none');
+
+    this.isShown = false;
+    this.isAnimating = false;
+    this.$dom.trigger('vjDomDialogHidden');
+  }
+
+  show() {
+    if (this.isShown) return Promise.reject(new Error('dialog isShown'));
+    if (this.isAnimating) return Promise.reject(new Error('dialog isAnimating'));
+    const promise = new Promise<string>((resolve) => {
+      this._resolve = resolve;
+    });
+    this._show();
+    return promise;
+  }
+
+  hide() {
+    if (!this.isShown || this.isAnimating) return false;
+    this._resolve('cancel');
+    this._hide();
+    return true;
+  }
+
+  dispatchAction(data: string) {
+    if (this.options.onDispatch(data) === false) return;
+    this._resolve(data);
+    this.hide();
+  }
+
+  handleClick(e) {
+    if (e.target === this.$dom.get(0)) {
+      this.dispatchAction('cancel');
+    }
+  }
+
+  handleKeyUp(e) {
+    if (e.keyCode === 27) {
+      this.dispatchAction('cancel');
+    }
+  }
+}

package/components/dialog/dialog.page.styl

@@ -0,0 +1,40 @@
+.dialog
+  position: fixed
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+  opacity: 0
+  z-index: 1000  // managed
+  // display flex will be added after animation completes
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  display: none
+  background: $dialog-layer-bg-color
+
+.dialog__content
+  position: relative
+
+.dialog.withBg .dialog__content
+  background: $dialog-bg-color
+  border: 1px solid $dialog-border-color
+  box-shadow: $dialog-shadow
+  min-width: rem(500px)
+  max-width: rem(900px)
+  max-height: 90vh
+  padding: rem(40px) rem(30px)
+  overflow-y: auto
+
+.dialog__body
+  margin-bottom: rem(20px)
+  min-height: rem(50px)
+
+  h1
+    font-size: 1.6rem
+    color: $dialog-title-color
+    margin-bottom: 1rem
+
+.dialog__action button
+  margin-left: rem(10px)
+  margin-bottom: 0

package/components/dialog/index.tsx

@@ -0,0 +1,285 @@
+/* eslint-disable react-refresh/only-export-components */
+import $ from 'jquery';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import Notification from 'vj/components/notification';
+import { i18n, tpl } from 'vj/utils';
+import DomainSelectAutoComplete from '../autocomplete/components/DomainSelectAutoComplete';
+import UserSelectAutoComplete from '../autocomplete/components/UserSelectAutoComplete';
+import DomDialog, { DialogOptions } from './DomDialog';
+
+export class Dialog {
+  options: DialogOptions;
+  $dom: JQuery<any>;
+  domDialogInstance: DomDialog;
+
+  constructor(options: Partial<DialogOptions> = {}) {
+    this.options = {
+      classes: '',
+      $body: null,
+      $action: null,
+      ...options,
+    };
+    const box: React.CSSProperties = {};
+    if (options.width) box.width = box.maxWidth = options.width;
+    if (options.height) box.height = box.maxHeight = options.height;
+    this.$dom = $(tpl(
+      <div className={`dialog withBg ${this.options.classes}`} style={{ display: 'none' }}>
+        <div className="dialog__content" style={box}>
+          <div className="dialog__body" style={{ height: 'calc(100% - 45px)' }} />
+          <div className="row"><div className="columns clearfix">
+            <div className="float-right dialog__action" />
+          </div></div>
+        </div>
+      </div>,
+    ));
+    this.$dom.on('click', '[data-action]', this.handleActionButton.bind(this));
+    this.$dom.on('vjDomDialogShow', this.beforeShow.bind(this));
+    this.$dom.on('vjDomDialogHidden', this.afterHide.bind(this));
+    this.$dom.find('.dialog__body').append(this.options.$body);
+    this.$dom.find('.dialog__action').append(this.options.$action);
+    this.domDialogInstance = new DomDialog(this.$dom, this.options);
+  }
+
+  beforeShow() {
+    this.$dom.appendTo('body');
+  }
+
+  afterHide() {
+    this.$dom.detach();
+  }
+
+  open() {
+    return this.domDialogInstance.show();
+  }
+
+  close() {
+    return this.domDialogInstance.hide();
+  }
+
+  handleActionButton(ev) {
+    this.domDialogInstance.dispatchAction($(ev.currentTarget).attr('data-action'));
+  }
+}
+
+export default Dialog;
+
+const buttonOk = tpl`<button class="primary rounded button" data-action="ok">${i18n('Ok')}</button>`;
+const buttonCancel = tpl`<button class="rounded button" data-action="cancel">${i18n('Cancel')}</button>`;
+const buttonYes = tpl`<button class="primary rounded button" data-action="yes">${i18n('Yes')}</button>`;
+const buttonNo = tpl`<button class="rounded button" data-action="no">${i18n('No')}</button>`;
+
+export class InfoDialog extends Dialog {
+  constructor(options: Partial<DialogOptions> = {}) {
+    super({
+      $action: buttonOk,
+      cancelByClickingBack: true,
+      cancelByEsc: true,
+      ...options,
+    });
+  }
+}
+
+export class ActionDialog extends Dialog {
+  constructor(options: Partial<DialogOptions> = {}) {
+    super({
+      $action: [buttonCancel, buttonOk].join('\n'),
+      cancelByClickingBack: true,
+      cancelByEsc: true,
+      ...options,
+    });
+  }
+
+  clear() {
+    this.$dom.find('input').val('');
+    return this;
+  }
+}
+
+export class ConfirmDialog extends Dialog {
+  constructor(options: Partial<DialogOptions> = {}) {
+    let buttons = [];
+    if (options.canCancel) {
+      buttons = [buttonCancel, buttonNo, buttonYes];
+    } else {
+      buttons = [buttonNo, buttonYes];
+    }
+    super({
+      $action: buttons.join('\n'),
+      cancelByClickingBack: options.canCancel,
+      cancelByEsc: options.canCancel,
+      ...options,
+    });
+  }
+}
+
+export interface Field {
+  type: 'text' | 'textarea' | 'checkbox' | 'user' | 'userId' | 'username' | 'domain';
+  options?: string[] | Record<string, string>;
+  placeholder?: string;
+  label?: string;
+  autofocus?: boolean;
+  required?: boolean;
+  default?: string;
+  columns?: number;
+  rows?: number;
+  multi?: boolean;
+}
+
+type Result<T extends string, R extends Record<T, Field>> = {
+  [K in keyof R]: R[K]['type'] extends ('text' | 'password' | 'username' | 'domain' | 'textarea') ? string
+    : R[K]['type'] extends 'checkbox' ? boolean
+      : R[K]['type'] extends 'userId' ? number
+        : R[K]['type'] extends 'user' ? any
+          : never;
+};
+
+interface PromptOptions {
+  cancelByClickingBack: boolean;
+  cancelByEsc: boolean;
+}
+
+export async function prompt<T extends string, R extends Record<T, Field>>(title: string, fields: R, options?: PromptOptions): Promise<Result<T, R>> {
+  let valueCache: Result<T, R> = {} as any;
+  const defaultValues = Object.fromEntries(Object.entries(fields)
+    .map(([name, field]: [T, Field]) => {
+      let firstOption = '';
+      if (field.options) {
+        if (Array.isArray(field.options)) firstOption = field.options[0];
+        else firstOption = Object.keys(field.options)[0];
+      }
+      return [name, field.default || firstOption || ''];
+    })) as Result<T, R>;
+
+  const layout: [string, Field][][] = [];
+  let pending: [string, Field][] = [];
+  for (const [name, field] of Object.entries(fields) as [T, Field][]) {
+    pending.push([name, field]);
+    if ((field.columns || -12) < 0) {
+      layout.push(pending);
+      pending = [];
+    }
+  }
+  if (pending.length > 0) layout.push(pending);
+
+  const Component = () => {
+    const [values, setValues] = React.useState(defaultValues);
+    const [selected, setSelected] = React.useState<Partial<Result<T, R>>>({});
+    const refs = React.useRef<Partial<Record<T, React.RefObject<any>>>>({});
+
+    React.useEffect(() => {
+      valueCache = values;
+    }, [values]);
+
+    return <div>
+      <div className="row"><div className="columns">
+        <h1>{title}</h1>
+      </div></div>
+      {layout.map((i) => <div className="row" key={i[0][0]}>
+        {i.map(([name, field]: [string, Field]) => <div key={name} className={`columns medium-${Math.abs(field.columns || 12)}`}>
+          {field.type === 'textarea' && <label>
+            {field.label}
+            <textarea
+              className="textbox"
+              rows={field.rows || 6}
+              placeholder={field.placeholder}
+              defaultValue={field.default}
+              data-autofocus={field.autofocus}
+              style={{ fontFamily: 'monospace' }}
+              onChange={(e) => setValues({ ...values, [name]: e.target.value })}
+            />
+          </label>}
+          {['text', 'user', 'userId', 'username', 'domain'].includes(field.type) && <label>
+            {field.label}
+            <div className="textbox-container">
+              {['text', 'password'].includes(field.type) && (field.options
+                ? <select
+                  defaultValue={field.default}
+                  className="select"
+                  data-autofocus={field.autofocus}
+                  onChange={(e) => setValues({ ...values, [name]: e.target.value })}
+                >
+                  {Object.entries(field.options).map(([value, label]) => (
+                    <option value={Array.isArray(field.options) ? label : value} key={value}>{label}</option>
+                  ))}
+                </select>
+                : <input
+                  type={field.type}
+                  className="textbox"
+                  data-autofocus={field.autofocus}
+                  defaultValue={field.default}
+                  onChange={(e) => setValues({ ...values, [name]: e.target.value })}
+                />)}
+              {['userId', 'username', 'user'].includes(field.type) && <UserSelectAutoComplete
+                data-autofocus={field.autofocus}
+                multi={field.multi}
+                ref={(el) => { refs.current[name] = el; }}
+                selectedKeys={selected[name]
+                  ? (field.multi
+                    ? String(selected[name]).split(',').filter(Boolean)
+                    : [selected[name].toString()])
+                  : []}
+                onChange={(e) => {
+                  if (e === selected[name]) return;
+                  const items = refs.current[name].getSelectedItems();
+                  const extract = (v) => (field.type === 'username' ? v?.uname : field.type === 'userId' ? v?._id : v);
+                  setValues({ ...values, [name]: field.multi ? items.map(extract) : extract(items[0]) });
+                  setSelected({ ...selected, [name]: e });
+                }}
+              />}
+              {field.type === 'domain' && <DomainSelectAutoComplete
+                data-autofocus={field.autofocus}
+                selectedKeys={values[name] ? [values[name]] : []}
+                onChange={(e) => setValues({ ...values, [name]: e })}
+              />}
+            </div>
+          </label>}
+          {field.type === 'checkbox' && <label className="checkbox">
+            <input
+              type="checkbox"
+              defaultChecked={field.default === 'true'}
+              onChange={(e) => setValues({ ...values, [name]: !!e.target.checked })}
+            />
+            {field.label}
+          </label>}
+        </div>)}</div>)}
+    </div>;
+  };
+  const div = document.createElement('div');
+  const root = ReactDOM.createRoot(div);
+  root.render(<Component />);
+  const res = await new Dialog({
+    $body: $(div),
+    $action: [buttonCancel, buttonOk].join('\n'),
+    cancelByClickingBack: options?.cancelByClickingBack ?? false,
+    cancelByEsc: options?.cancelByEsc ?? false,
+    onDispatch(action) {
+      if (action === 'ok') {
+        for (const [name, field] of Object.entries(fields) as [string, Field][]) {
+          if ((field as any).required && !valueCache[name]) {
+            console.log('missing ', name);
+            Notification.error(i18n('{0} is required', field.label || name));
+            return false;
+          }
+        }
+      }
+      return true;
+    },
+  }).open();
+  root.unmount();
+  if (res !== 'ok') return null;
+  return valueCache;
+}
+
+export async function confirm(text: string) {
+  const res = await new ConfirmDialog({
+    $body: tpl.typoMsg(text),
+  }).open();
+  return res === 'yes';
+}
+
+export async function alert(text: string) {
+  return await new InfoDialog({
+    $body: tpl.typoMsg(text),
+  }).open();
+}

package/components/discussion/CommentBox.js

@@ -0,0 +1,103 @@
+import $ from 'jquery';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import TextareaHandler from 'vj/components/editor/textareaHandler';
+import Notification from 'vj/components/notification';
+import { request } from 'vj/utils';
+
+let initialized = false;
+const $template = $('.dczcomments__box').eq(0).clone();
+
+function getClosestInstance($dom) {
+  return $dom.closest('.dczcomments__box').data('instance');
+}
+
+function onBoxCancel(ev) {
+  const commentBox = getClosestInstance($(ev.currentTarget));
+  if (commentBox) commentBox.onCancel(ev);
+}
+
+function onBoxSubmit(ev) {
+  const commentBox = getClosestInstance($(ev.currentTarget));
+  if (commentBox) commentBox.onSubmit(ev);
+  ev.preventDefault();
+}
+
+function init() {
+  if (initialized) return;
+  $(document).on('submit', '[name="dczcomments__box__form"]', onBoxSubmit);
+  $(document).on('vjCommentBoxCancel', '[name="dczcomments__box__form"]', onBoxCancel);
+  $(document).on('click', '[name="dczcomments__box__cancel"]', onBoxCancel);
+  initialized = true;
+}
+
+export default class CommentBox extends DOMAttachedObject {
+  static DOMAttachKey = 'vjCommentBoxInstance';
+
+  constructor($dom, options = {}) {
+    super($dom);
+    init();
+    this.$box = $template.clone();
+    this.$box.data('instance', this);
+    this.options = {
+      initialText: null,
+      mode: null,
+      form: null,
+      onCancel: () => null,
+      ...options,
+    };
+    if (this.options.initialText) this.setText(this.options.initialText);
+    if (this.options.mode) {
+      const submitButton = this.$box.find('.dczcomments__box__submit');
+      submitButton.val(submitButton.attr(`data-value-${this.options.mode}`));
+    }
+  }
+
+  getTextareaHandler() {
+    const $textarea = this.$box.find('textarea');
+    return TextareaHandler.getOrConstruct($textarea);
+  }
+
+  focus() {
+    this.getTextareaHandler().focus();
+    return this;
+  }
+
+  setText(text) {
+    this.getTextareaHandler().val(text);
+    return this;
+  }
+
+  getText() {
+    return this.getTextareaHandler().val();
+  }
+
+  insertText(text) {
+    const handler = this.getTextareaHandler();
+    handler.val(handler.val() + text);
+    return this;
+  }
+
+  appendTo($dom) {
+    this.$box.appendTo($dom);
+    this.$box.trigger('vjContentNew');
+    return this;
+  }
+
+  async onSubmit() {
+    try {
+      await request.post('', {
+        ...this.options.form,
+        content: this.getText(),
+      });
+      window.location.reload();
+    } catch (error) {
+      Notification.error(error.message);
+    }
+  }
+
+  async onCancel(ev) {
+    await this.options.onCancel(ev);
+    this.$box.remove();
+    this.detach();
+  }
+}

package/components/discussion/collapsible.page.styl

@@ -0,0 +1,40 @@
+.collapsible-content
+  position: relative
+
+  &::after
+    content: ""
+    position: absolute
+    bottom: rem(16px)
+    left: 0
+    right: 0
+    height: rem(55px)
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
+    pointer-events: none
+    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1)
+    opacity: 1
+    z-index: 1
+
+  &__inner
+    overflow: hidden
+    max-height: rem(300px)
+    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1)
+
+  .collapsible-toggle
+    text-align: center
+    opacity: 0
+
+    &.visible
+      opacity: 1
+
+    &__link
+      color: $primary-color
+      text-decoration: none
+      display: inline-block
+      position: relative
+      overflow: hidden
+
+.collapsible-content.expanded
+  &::after
+    opacity: 0 !important
+  .collapsible-content__inner
+    max-height: none