@shzlx/ui-default 4.58.2

package/components/dropdown/Dropdown.js

@@ -0,0 +1,50 @@
+import Drop from 'tether-drop';
+import responsiveCutoff from 'vj/breakpoints.json';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import { mediaQuery, zIndexManager } from 'vj/utils';
+
+export default class Dropdown extends DOMAttachedObject {
+  static DOMAttachKey = 'vjDropdownInstance';
+
+  static DOMAttachSelector = '[data-dropdown-target]';
+
+  constructor($dom, options = {}) {
+    if ($dom.attr('data-dropdown-trigger-desktop-only') !== undefined) {
+      if (mediaQuery.isBelow(responsiveCutoff.mobile)) {
+        super(null);
+        return;
+      }
+    }
+    super($dom);
+    this.options = {
+      target: null,
+      position: $dom.attr('data-dropdown-pos') || 'bottom left',
+      ...options,
+    };
+    this.dropInstance = new Drop({
+      target: $dom[0],
+      classes: `dropdown ${$dom.attr('data-dropdown-custom-class') || ''}`,
+      content: this.options.target || $.find($dom.attr('data-dropdown-target'))[0],
+      position: this.options.position,
+      openOn: 'hover',
+      constrainToWindow: $dom.attr('data-dropdown-disabledconstrainToWindow') === undefined,
+      constrainToScrollParent: false,
+    });
+    this.dropInstance.on('open', this.onDropOpen.bind(this));
+    this.dropInstance.on('close', this.onDropClose.bind(this));
+  }
+
+  detach() {
+    super.detach();
+    this.dropInstance.destroy();
+  }
+
+  onDropOpen() {
+    $(this.dropInstance.drop).css('z-index', zIndexManager.getNext());
+    this.$dom.trigger('vjDropdownShow');
+  }
+
+  onDropClose() {
+    this.$dom.trigger('vjDropdownHide');
+  }
+}

package/components/dropdown/dropdown.page.styl

@@ -0,0 +1,33 @@
+.dropdown-target
+  display: none
+
+.drop .dropdown-target
+  display: block
+
+.drop.nav__dropdown
+  max-height: calc(100% - 60px)
+  overflow-x: hidden
+  overflow-y: auto
+  box-shadow: 0rem 0.125rem 0.4375rem rgba(0 0 0 , 30%);
+
+.drop.nav__dropdown.drop-open
+  overflow-x: auto
+
+.dropdown
+  .menu
+    min-width: rem(150px)
+    box-shadow: $menu-drop-shadow
+    background: $menu-drop-bg-color
+    font-size: rem($font-size-small)
+
+  .menu__link
+    padding: rem(8px 10px)
+
+.dropdown
+  .drop-content
+    transition: transform .1s ease-in-out
+    transform: scale(0.9) translateZ(0)
+
+  &.drop-after-open
+    .drop-content
+      transform: scale(1) translateZ(0)

package/components/dropdown/dropdown.page.ts

@@ -0,0 +1,8 @@
+import { AutoloadPage } from 'vj/misc/Page';
+import Dropdown from './Dropdown';
+
+const dropdownPage = new AutoloadPage('dropdownPage', () => {
+  Dropdown.registerLifeCycleHooks();
+});
+
+export default dropdownPage;

package/components/editor/cmeditor.page.ts

@@ -0,0 +1,23 @@
+import { AutoloadPage } from 'vj/misc/Page';
+import { delay } from 'vj/utils';
+import CmEditor from '.';
+
+function runSubstitute($container: JQuery<Document | HTMLElement>) {
+  for (const language of ['markdown', 'yaml', 'json', 'plain']) {
+    $container.find(`textarea[data-${language}]`).get().forEach((element) => {
+      const config: any = { language };
+      if ($(element).data('model')) config.model = $(element).data('model');
+      CmEditor.getOrConstruct($(element), config);
+    });
+  }
+}
+
+const cmEditorPage = new AutoloadPage('cmEditorPage', () => {
+  runSubstitute($('body'));
+  $(document).on('vjContentNew', async (e) => {
+    await delay(0);
+    runSubstitute($(e.target));
+  });
+});
+
+export default cmEditorPage;

package/components/editor/cmeditor.styl

@@ -0,0 +1,10 @@
+.decoration-hide
+  color: grey !important
+  background-color: grey !important
+
+.md-editor-preview code
+  background-color: unset !important
+  color: unset !important
+
+.md-editor-scrn pre.syntax-hl code
+  padding-left: unset !important

package/components/editor/index.tsx

@@ -0,0 +1,293 @@
+import $ from 'jquery';
+import { debounce } from 'lodash';
+import { nanoid } from 'nanoid';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import { getTheme, i18n } from 'vj/utils';
+import uploadFiles from '../upload';
+
+interface MonacoOptions {
+  language?: string;
+  onChange?: (val: string) => any;
+  theme?: string;
+  model?: string;
+  autoResize?: boolean;
+  autoLayout?: boolean;
+  value?: string;
+  hide?: string[];
+  lineNumbers?: 'on' | 'off' | 'relative' | 'interval';
+}
+type Options = MonacoOptions;
+
+export default class Editor extends DOMAttachedObject {
+  static DOMAttachKey = 'vjEditorInstance';
+  model: import('../monaco').default.editor.IModel;
+  editor: import('../monaco').default.editor.IStandaloneCodeEditor;
+  markdownEditor: any;
+  valueCache?: string;
+  setMarkdownEditorValue?: (v: string) => void;
+  reactRoot?: ReactDOM.Root;
+  isValid: boolean;
+
+  constructor($dom, public options: Options = {}) {
+    super($dom);
+    if (UserContext.preferredEditorType === 'monaco') this.initMonaco();
+    else if (options.language && options.language !== 'markdown') this.initMonaco();
+    else this.initMarkdownEditor();
+  }
+
+  async initMonaco() {
+    const { load } = await import('vj/components/monaco/loader');
+    const {
+      onChange, language = 'markdown',
+      theme = `vs-${getTheme()}`,
+      model = `file://model-${Math.random().toString(16)}`,
+      autoResize = true, autoLayout = true,
+      hide = [], lineNumbers = 'on',
+    } = this.options;
+    const { monaco, registerAction } = await load([language]);
+    const { $dom } = this;
+    const hasFocus = $dom.is(':focus') || $dom.hasClass('autofocus');
+    const origin = $dom.get(0);
+    const ele = document.createElement('div');
+    $(ele).width('100%').addClass('textbox');
+    if (!autoResize && $dom.height()) $(ele).height($dom.height());
+    $dom.hide();
+    origin.parentElement.appendChild(ele);
+    const value = this.options.value || $dom.val();
+    this.model = typeof model === 'string'
+      ? monaco.editor.getModel(monaco.Uri.parse(model))
+      || monaco.editor.createModel(value, language === 'auto' ? undefined : language, monaco.Uri.parse(model))
+      : model;
+    if (!this.options.model) this.model.setValue(value);
+    const cfg: import('../monaco').default.editor.IStandaloneEditorConstructionOptions = {
+      theme,
+      lineNumbers,
+      glyphMargin: true,
+      lightbulb: { enabled: monaco.editor.ShowLightbulbIconMode.On },
+      model: this.model,
+      minimap: { enabled: false },
+      hideCursorInOverviewRuler: true,
+      overviewRulerLanes: 0,
+      overviewRulerBorder: false,
+      fontFamily: UserContext.codeFontFamily,
+      fontLigatures: '',
+      unicodeHighlight: {
+        ambiguousCharacters: language !== 'markdown',
+      },
+    };
+    if (autoLayout) cfg.automaticLayout = true;
+    let prevHeight = 0;
+    const updateEditorHeight = () => {
+      const editorElement = this.editor.getDomNode();
+      if (!editorElement) return;
+      const lineHeight = this.editor.getOption(monaco.editor.EditorOption.lineHeight);
+      const lineCount = this.editor.getModel()?.getLineCount() || 1;
+      let height = this.editor.getTopForLineNumber(lineCount + 1) + lineHeight;
+      if (prevHeight !== height) {
+        if (window.innerHeight * 1.5 < height) {
+          height = window.innerHeight;
+          this.editor.updateOptions({
+            scrollbar: {
+              vertical: 'auto',
+              horizontal: 'auto',
+              handleMouseWheel: true,
+            },
+          });
+        } else {
+          this.editor.updateOptions({
+            scrollbar: {
+              vertical: 'hidden',
+              horizontal: 'hidden',
+              handleMouseWheel: false,
+            },
+          });
+        }
+        prevHeight = height;
+        editorElement.style.height = `${height}px`;
+        this.editor.layout();
+      }
+    };
+    if (autoResize) {
+      cfg.wordWrap = 'bounded';
+      cfg.scrollBeyondLastLine = false;
+    }
+    this.editor = monaco.editor.create(ele, cfg);
+    if (hide.length) {
+      const ranges = [];
+      for (const text of hide) {
+        const found = this.model.findMatches(text, true, false, true, '', true);
+        ranges.push(...found.map((i) => i.range));
+      }
+      this.editor.deltaDecorations([], ranges.map((range) => ({ range, options: { inlineClassName: 'decoration-hide' } })));
+    }
+    registerAction(this.editor, this.model, this.$dom);
+    if (autoResize) {
+      this.editor.onDidChangeModelDecorations(() => {
+        updateEditorHeight(); // typing
+        requestAnimationFrame(updateEditorHeight); // folding
+      });
+    }
+    this.editor.onDidChangeModelContent(() => {
+      const val = this.editor.getValue({ lineEnding: '\n', preserveBOM: false });
+      $dom.val(val);
+      $dom.text(val);
+      if (onChange) onChange(val);
+    });
+    this.isValid = true;
+    if (hasFocus) this.focus();
+    if (autoResize) updateEditorHeight();
+    // @ts-ignore
+    window.model = this.model;
+    // @ts-ignore
+    window.editor = this.editor;
+  }
+
+  async initMarkdownEditor() {
+    const pagename = document.documentElement.getAttribute('data-page');
+    const pageUploadConfig: Record<string, { endpoint: string, type?: string }> = {
+      problem_edit: { endpoint: './files', type: 'additional_file' },
+      homework_edit: { endpoint: './file' },
+      contest_edit: { endpoint: './management', type: 'public' },
+    };
+    const uploadCfg = pageUploadConfig[pagename];
+    const useFileProtocol = !!uploadCfg || ['problem_create', 'homework_create', 'contest_create'].includes(pagename);
+    const that = this;
+    const { $dom } = this;
+    const hasFocus = $dom.is(':focus') || $dom.hasClass('autofocus');
+    const origin = $dom.get(0);
+    const ele = document.createElement('div');
+    const value = $dom.val();
+    const { onChange } = this.options;
+    const { MdEditor } = await import('./mdeditor');
+
+    const debouncedTrigger = debounce(() => {
+      $(document.querySelector('.md-editor-preview')).trigger('vjContentNew');
+    }, 500, { trailing: true });
+    const renderCallback = (ref) => {
+      this.markdownEditor = ref;
+      setTimeout(debouncedTrigger, 200);
+    };
+
+    function EditorComponent() {
+      const [val, setVal] = React.useState(value);
+      that.setMarkdownEditorValue = setVal;
+      return <MdEditor
+        className="textbox"
+        autoFocus={hasFocus}
+        codeTheme="github"
+        codeStyleReverse={false}
+        ref={renderCallback}
+        value={val}
+        theme={getTheme()}
+        language={UserContext.viewLang === 'zh' ? 'zh-CN' : UserContext.viewLang?.replace('_', '-')}
+        noMermaid
+        noPrettier
+        noKatex
+        noHighlight
+        autoDetectCode
+        toolbarsExclude={[
+          // 'bold',
+          // 'underline',
+          // 'italic',
+          // '-',
+          // 'strikeThrough',
+          // 'title',
+          'sub',
+          'sup',
+          // 'quote',
+          // 'unorderedList',
+          // 'orderedList',
+          // 'task',
+          // '-',
+          // 'codeRow',
+          // 'code',
+          // 'link',
+          // 'image',
+          // 'table',
+          'mermaid',
+          // 'katex',
+          // '-',
+          // 'revoke',
+          // 'next',
+          'save',
+          // '=',
+          'pageFullscreen',
+          'fullscreen',
+          // 'preview',
+          'previewOnly',
+          'htmlPreview',
+          // 'catalog',
+          'github',
+        ]}
+        onChange={(v) => {
+          that.valueCache = v;
+          setVal(v);
+          $dom.val(v);
+          $dom.text(v);
+          onChange?.(v);
+          setTimeout(debouncedTrigger, 100);
+        }}
+        onUploadImg={async (files, callback) => {
+          let ext: string;
+          const matches = files[0].type.match(/^image\/(png|jpg|jpeg|gif)$/i);
+          if (matches) {
+            [, ext] = matches;
+          } else if (files[0].type === 'application/x-zip-compressed') {
+            ext = 'zip';
+          }
+          if (!ext) return i18n('No Supported file type.');
+          const filename = `${nanoid()}.${ext}`;
+          await uploadFiles(uploadCfg?.endpoint || '/file', [files[0]], {
+            type: uploadCfg?.type,
+            filenameCallback: () => filename,
+          }).then(() => {
+            callback([`${useFileProtocol ? 'file://' : `/file/${UserContext._id}/`}${filename}`]);
+          }).catch(() => {
+            callback([]);
+          });
+          return null;
+        }}
+      />;
+    }
+
+    this.valueCache = value;
+
+    this.reactRoot = ReactDOM.createRoot(ele);
+    this.reactRoot.render(<EditorComponent />);
+    $dom.hide();
+    origin.parentElement.appendChild(ele);
+    this.isValid = true;
+    if (hasFocus) this.focus();
+  }
+
+  destroy() {
+    this.detach();
+    if (this.reactRoot) this.reactRoot.unmount();
+    else if (this.editor?.dispose) this.editor.dispose();
+  }
+
+  ensureValid() {
+    if (!this.isValid) throw new Error('Editor is not loaded');
+  }
+
+  value(val?: string) {
+    this.ensureValid();
+    if (typeof val === 'string') {
+      if (this.editor) return this.editor.setValue(val);
+      this.setMarkdownEditorValue?.(val);
+      this.markdownEditor?.resetHistory?.();
+    }
+    if (this.editor) return this.editor.getValue({ lineEnding: '\n', preserveBOM: false });
+    return this.valueCache;
+  }
+
+  focus() {
+    this.ensureValid();
+    if (!this.editor || !this.model) return;
+    this.editor.focus();
+    const range = this.model.getFullModelRange();
+    this.editor.setPosition({ lineNumber: range.endLineNumber, column: range.endColumn });
+  }
+}

package/components/editor/mdeditor.ts

@@ -0,0 +1,60 @@
+import 'md-editor-rt/lib/style.css';
+
+import zh_TW from '@vavt/cm-extension/dist/locale/zh-TW';
+import Anchor from 'markdown-it-anchor';
+import Footnote from 'markdown-it-footnote';
+import Mark from 'markdown-it-mark';
+import MergeCells from 'markdown-it-merge-cells';
+import TOC from 'markdown-it-table-of-contents';
+import { config, MdEditor } from 'md-editor-rt';
+import Imsize from '../../backendlib/markdown-it-imsize';
+import katex from '../../backendlib/markdown-it-katex';
+import { Media } from '../../backendlib/markdown-it-media';
+import { xssProtector } from '../../backendlib/markdown-it-xss';
+
+const pagename = document.documentElement.getAttribute('data-page');
+const previewConfig: Record<string, string> = {
+  problem_edit: './file/',
+  homework_edit: './file/public/',
+  contest_edit: './file/public/',
+};
+const isCreatePage = ['problem_create', 'homework_create', 'contest_create'].includes(pagename);
+const filePreviewPrefix = previewConfig[pagename] || (isCreatePage ? `/file/${UserContext._id}/` : null);
+
+config({
+  markdownItConfig(mdit) {
+    mdit.options.html = true;
+    mdit.options.linkify = true;
+    mdit.linkify.tlds('.py', false);
+    mdit.linkify.tlds('.zip', false);
+    mdit.linkify.tlds('.mov', false);
+    mdit.use(Media);
+    mdit.use(Footnote);
+    mdit.use(Mark);
+    mdit.use(Imsize);
+    mdit.use(Anchor);
+    mdit.use(TOC);
+    mdit.use(MergeCells);
+    mdit.use(xssProtector);
+    mdit.use(katex);
+    if (filePreviewPrefix) {
+      mdit.core.ruler.before('normalize', 'xss', (state) => {
+        state.src = state.src.replace(/file:\/\//g, filePreviewPrefix);
+      });
+    }
+  },
+  markdownItPlugins() {
+    // disable all default plugins
+    return [];
+  },
+  codeMirrorExtensions(extensions) {
+    return extensions.filter((i) => i.type !== 'linkShortener');
+  },
+  editorConfig: {
+    languageUserDefined: {
+      'zh-TW': zh_TW,
+    },
+  },
+});
+
+export { MdEditor };

package/components/editor/textareaHandler.ts

@@ -0,0 +1,29 @@
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+import Editor from './index';
+
+export default class TextareaHandler extends DOMAttachedObject {
+  static DOMAttachKey = 'vjTextareaHandlerInstance';
+
+  getCmEditor() {
+    return Editor.get(this.$dom);
+  }
+
+  isCmEditor() {
+    const editor = this.getCmEditor();
+    return !!(editor && editor.isValid);
+  }
+
+  val(...argv) {
+    if (this.isCmEditor()) {
+      return this.getCmEditor().value(...argv);
+    }
+    return this.$dom.val(...argv);
+  }
+
+  focus() {
+    if (this.isCmEditor()) {
+      this.getCmEditor().focus();
+    }
+    this.$dom.focus();
+  }
+}

package/components/footer/footer.page.styl

@@ -0,0 +1,94 @@
+$footer-extra-link-gap = 20px
+
+.footer
+  background: $footer-bg-color
+  color: $text-1-color
+
+  h1
+    font-size: rem($font-size-title)
+
+    +mobile()
+      padding: rem($grid-padding)
+      cursor: pointer
+      font-size: rem($font-size-secondary)
+
+.footer__category
+  padding-top: rem(30px)
+  padding-bottom: rem(50px)
+
+  +mobile()
+    padding-top: rem($grid-padding)
+    padding-bottom: rem($grid-padding)
+    border-bottom: 1px solid darken($footer-bg-color, 5%)
+
+    &.expandable
+      padding: 0
+
+  .expand-icon
+    display: none
+
+    +mobile()
+      display: inline-block
+
+  &.expanded .expand-icon
+    transform: rotate(180deg)
+
+.footer__category__list
+  margin-top: rem(10px)
+  margin-bottom: rem(10px)
+  font-size: rem($font-size-small)
+  line-height: 2
+
+  +mobile()
+    margin-top: 0
+    padding-left: rem($grid-padding)
+    padding-right: rem($grid-padding)
+
+.footer__category__expander
+  +mobile()
+    display: none
+
+  +above(rupture.mobile-cutoff)
+    display: block !important
+
+.footer__extra-left
+  float: left
+
+.footer__extra-right
+  float: right
+
+.footer__extra-link
+  padding: rem(20px 0)
+  font-size: rem($font-size-small)
+
+.footer__extra-link-item
+  float: left
+  line-height: 2
+
+.footer__extra-left .footer__extra-link-item
+  margin-right: rem($footer-extra-link-gap)
+
+.footer__extra-right .footer__extra-link-item
+  margin-left: rem($footer-extra-link-gap)
+
+.layout--immersive
+  .footer
+    background: none
+    color: #FFF
+
+    a, a:visited, a:active
+      color: #FFF
+
+    a:hover
+      color: #FFF
+
++mobile()
+  .footer__extra-left, .footer__extra-right
+    float: none
+    display: block
+
+    .footer__extra-link-item
+      float: none
+      display: inline-block
+      margin-left: 0
+      margin-right: $footer-extra-link-gap

package/components/footer/footer.page.ts

@@ -0,0 +1,26 @@
+import $ from 'jquery';
+import responsiveCutoff from 'vj/breakpoints.json';
+import { AutoloadPage } from 'vj/misc/Page';
+import { isBelow } from 'vj/utils/mediaQuery';
+import { slideDown, slideUp } from 'vj/utils/slide';
+
+const footerPage = new AutoloadPage('footerPage', () => {
+  if (!$('.footer').length) return;
+  $('.footer__category.expandable > h1').on('click', async (ev) => {
+    if (!isBelow(responsiveCutoff.mobile)) return;
+    const $category = $(ev.currentTarget).closest('.footer__category');
+    const $list = $category.find('.footer__category__expander');
+    if ($category.hasClass('animating')) return;
+    $category.addClass('animating');
+    if ($category.hasClass('expanded')) {
+      $category.removeClass('expanded');
+      await slideUp($list, 300, { opacity: 1 }, { opacity: 0 });
+    } else {
+      $category.addClass('expanded');
+      await slideDown($list, 300, { opacity: 0 }, { opacity: 1 });
+    }
+    $category.removeClass('animating');
+  });
+});
+
+export default footerPage;

package/components/form/button.page.default.styl

@@ -0,0 +1,59 @@
+@import './var.inc.styl'
+
+.button
+  &:not(.codicon)
+    background-color: lighten($default-color, 50%)
+    border: 1px solid $default-color
+    transition: background-color .2s, box-shadow .5s
+    transition-timing-function: ease-out-sine
+
+    &, &:visited, &:hover
+      &, .typo &
+        color: $text-1-color
+
+    &:not(.disabled)
+      &:hover, &:focus
+        background-color: darken($default-color, 5%)
+        border-color: darken($default-color, 5%)
+        box-shadow: 0 4px 15px rgba(darken($default-color, 10%), 0.5)
+
+      &:focus
+        border-color: $input-focus-color
+
+    &.rounded
+      border-radius: rem($form-control-height / 2)
+
+    &.primary
+      border-color: $primary-color
+      background-color: $primary-color
+
+      &, &:visited, &:hover
+        &, .typo &
+          color: #FFF
+
+      &:not(.disabled)
+        &:hover
+          background-color: lighten(saturate($primary-color, 30%), 10%)
+          border-color: saturate($primary-color, 70%)
+          box-shadow: 0 4px 15px rgba(saturate($primary-color, 70%), 0.3)
+
+    &.disabled
+      cursor: default
+      opacity: 0.5
+
+.button.inverse
+  line-height: rem($form-control-height - 4)
+  border: 2px solid #FFF
+  background: none
+
+  &, &:visited
+    &, .typo &
+      color: #FFF
+
+  &:not(.disabled)
+    &:hover, &:focus
+      border-color: $immersive-primary-color
+      background: none
+      box-shadow: none
+      &, .typo &
+        color: $immersive-primary-color