@shzlx/ui-default 4.58.2

package/components/autocomplete/components/DomainSelectAutoComplete.tsx

@@ -0,0 +1,53 @@
+import { AutoComplete, AutoCompleteHandle, AutoCompleteProps } from '@hydrooj/components';
+import type { DomainDoc } from 'hydrooj/src/interface';
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import { request } from 'vj/utils';
+
+const DomainSelectAutoComplete = forwardRef<AutoCompleteHandle<DomainDoc>, AutoCompleteProps<DomainDoc>>((props, ref) => (
+  <AutoComplete<DomainDoc>
+    ref={ref as any}
+    cacheKey="domain"
+    renderItem={(domain) => (
+      <div className="media">
+        <div className="media__left medium">
+          <img className="small domain-profile-avatar" src={domain.avatarUrl} alt="" width="30" height="30" />
+        </div>
+        <div className="media__body medium">
+          <div className="domain-select__name">{domain.name}</div>
+          <div className="domain-select__id">ID = {domain._id}</div>
+        </div>
+      </div>
+    )}
+    queryItems={(query) => request.get('/domain/search', { q: query })}
+    itemText={(domain) => domain.name}
+    itemKey={(domain) => domain._id}
+    {...{
+      width: '100%',
+      height: 'auto',
+      listStyle: {},
+      multi: false,
+      selectedKeys: [],
+      allowEmptyQuery: true,
+      freeSolo: false,
+      freeSoloConverter: (input) => input,
+      ...props,
+    }}
+  />
+));
+
+DomainSelectAutoComplete.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  listStyle: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  multi: PropTypes.bool,
+  selectedKeys: PropTypes.arrayOf(PropTypes.string),
+  allowEmptyQuery: PropTypes.bool,
+  freeSolo: PropTypes.bool,
+  freeSoloConverter: PropTypes.func,
+};
+
+DomainSelectAutoComplete.displayName = 'DomainSelectAutoComplete';
+
+export default DomainSelectAutoComplete;

package/components/autocomplete/components/FileSelectAutoComplete.tsx

@@ -0,0 +1,50 @@
+import { AutoComplete } from '@hydrooj/components';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+type DefaultProps = {
+  _id: string;
+  name: string;
+} & string;
+
+const FileSelectAutoComplete = React.forwardRef<any, any>((props, ref) => (
+  <AutoComplete<DefaultProps>
+    ref={ref as any}
+    fetchItems={(keys) => props.data.filter((i) => (i._id ? keys.includes(i._id) : keys.includes(i)))}
+    queryItems={(query) => props.data.filter((i) => (i.name
+      ? i.name.toLowerCase().match(query.toLowerCase())
+      : i.toString().toLowerCase().match(query.toLowerCase())
+    ))}
+    itemText={(item) => `${item.name || item}`}
+    itemKey={(item) => `${item._id?.toString() || item.name || item}`}
+    renderItem={(item) => item.name || item._id || item} // TODO icon
+    allowEmptyQuery
+    {...{
+      width: '100%',
+      height: 'auto',
+      listStyle: {},
+      multi: false,
+      selectedKeys: [],
+      freeSolo: false,
+      freeSoloConverter: (input) => input,
+      ...props,
+    }}
+  />
+));
+
+FileSelectAutoComplete.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  listStyle: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  multi: PropTypes.bool,
+  selectedKeys: PropTypes.arrayOf(PropTypes.string),
+  allowEmptyQuery: PropTypes.bool,
+  freeSolo: PropTypes.bool,
+  freeSoloConverter: PropTypes.func,
+  data: PropTypes.arrayOf(PropTypes.any),
+};
+
+FileSelectAutoComplete.displayName = 'FileSelectAutoComplete';
+
+export default FileSelectAutoComplete;

package/components/autocomplete/components/LanguageSelectAutoComplete.tsx

@@ -0,0 +1,48 @@
+import { CustomSelectAutoComplete } from '@hydrooj/components';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const prefixes = new Set(Object.keys(window.LANGS).filter((i) => i.includes('.')).map((i) => i.split('.')[0]));
+const data = Object.keys(window.LANGS).filter((i) => !prefixes.has(i))
+  .map((i) => ({ name: `${i.includes('.') ? `${window.LANGS[i.split('.')[0]].display || ''}/` : ''}${window.LANGS[i].display}`, _id: i }));
+const withAuto = [...data, { name: 'Auto', _id: 'auto' }];
+
+const LanguageSelectAutoComplete = React.forwardRef<any, any>((props, ref) => (
+  <CustomSelectAutoComplete
+    ref={ref as any}
+    {...props}
+    selectedKeys={typeof props.selectedKeys === 'string' ? props.selectedKeys.split(',') : props.selectedKeys}
+    data={props.withAuto ? withAuto : data}
+    renderItem={(item) => (prefixes.has(item._id) ? '' : `${item.name}`)}
+    onChange={(val) => {
+      if (!props.multi) {
+        props.onChange(val);
+        return;
+      }
+      let value = val.split(',');
+      const active = new Set(value.filter((i) => i.includes('.')).map((i) => i.split('.')[0]));
+      value = value.filter((i) => !prefixes.has(i) || active.has(i));
+      for (const i of active) if (!value.includes(i)) value.push(i);
+      props.onChange(value.join(','));
+    }}
+    multi={!!props.multi}
+  />
+));
+
+LanguageSelectAutoComplete.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  listStyle: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  multi: PropTypes.bool,
+  selectedKeys: PropTypes.arrayOf(PropTypes.string),
+  allowEmptyQuery: PropTypes.bool,
+  freeSolo: PropTypes.bool,
+  freeSoloConverter: PropTypes.func,
+  data: PropTypes.arrayOf(PropTypes.any),
+  withAuto: PropTypes.bool,
+};
+
+LanguageSelectAutoComplete.displayName = 'LanguageSelectAutoComplete';
+
+export default LanguageSelectAutoComplete;

package/components/autocomplete/components/ProblemSelectAutoComplete.tsx

@@ -0,0 +1,54 @@
+import { AutoComplete, AutoCompleteHandle, AutoCompleteProps } from '@hydrooj/components';
+import type { ProblemDoc } from 'hydrooj/src/interface';
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import { api, request } from 'vj/utils';
+
+const ProblemSelectAutoComplete = forwardRef<AutoCompleteHandle<ProblemDoc>, AutoCompleteProps<ProblemDoc>>((props, ref) => (
+  <AutoComplete<ProblemDoc>
+    ref={ref as any}
+    cacheKey={`problem-${UiContext.domainId}`}
+    queryItems={async (query) => {
+      const { pdocs } = await request.get(`/d/${UiContext.domainId}/p`, { q: query, quick: true, sort: query ? 'default' : 'recent' });
+      return pdocs;
+    }}
+    fetchItems={(ids) => api('problems', { ids: ids.map((i) => +i) }, ['docId', 'pid', 'title'])}
+    itemText={(pdoc) => `${`${pdoc.docId} ${pdoc.title}`}`}
+    itemKey={(pdoc) => `${pdoc.docId || pdoc}`}
+    renderItem={(pdoc) => (
+      <div className="media">
+        <div className="media__body medium">
+          <div className="problem-select__name">{pdoc.pid ? `${pdoc.pid} ` : ''}{pdoc.title}</div>
+          <div className="problem-select__id">ID = {pdoc.docId}</div>
+        </div>
+      </div>
+    )}
+    {...{
+      width: '100%',
+      height: 'auto',
+      listStyle: {},
+      multi: false,
+      selectedKeys: [],
+      allowEmptyQuery: true,
+      freeSolo: false,
+      freeSoloConverter: (input) => input,
+      ...props,
+    }}
+  />
+));
+
+ProblemSelectAutoComplete.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  listStyle: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  multi: PropTypes.bool,
+  selectedKeys: PropTypes.arrayOf(PropTypes.string),
+  allowEmptyQuery: PropTypes.bool,
+  freeSolo: PropTypes.bool,
+  freeSoloConverter: PropTypes.func,
+};
+
+ProblemSelectAutoComplete.displayName = 'ProblemSelectAutoComplete';
+
+export default ProblemSelectAutoComplete;

package/components/autocomplete/components/UserSelectAutoComplete.tsx

@@ -0,0 +1,54 @@
+import { AutoComplete, AutoCompleteHandle, AutoCompleteProps } from '@hydrooj/components';
+import type { Udoc } from 'hydrooj/src/interface';
+import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
+import { api } from 'vj/utils';
+
+const UserSelectAutoComplete = forwardRef<AutoCompleteHandle<Udoc>, AutoCompleteProps<Udoc>>((props, ref) => (
+  <AutoComplete<Udoc>
+    ref={ref as any}
+    cacheKey="user"
+    queryItems={(query) => api('users', { search: query }, ['_id', 'uname', 'displayName', 'avatarUrl'])}
+    fetchItems={(ids) => api('users', { auto: ids }, ['_id', 'uname', 'displayName'])}
+    itemText={(user) => user.uname + (user.displayName ? ` (${user.displayName})` : '')}
+    itemKey={(user) => ((props.multi || /^[+-]?\d+$/.test(user.uname.trim())) ? user._id.toString() : user.uname)}
+    renderItem={(user) => (
+      <div className="media">
+        <div className="media__left medium">
+          <img className="small user-profile-avatar" alt="" src={user.avatarUrl} width="30" height="30" />
+        </div>
+        <div className="media__body medium">
+          <div className="user-select__uname">{user.uname}{user.displayName && ` (${user.displayName})`}</div>
+          <div className="user-select__uid">UID = {user._id}</div>
+        </div>
+      </div>
+    )}
+    {...{
+      width: '100%',
+      height: 'auto',
+      listStyle: {},
+      multi: false,
+      selectedKeys: [],
+      allowEmptyQuery: false,
+      freeSolo: false,
+      freeSoloConverter: (input) => input,
+      ...props,
+    }}
+  />
+));
+
+UserSelectAutoComplete.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  listStyle: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  multi: PropTypes.bool,
+  selectedKeys: PropTypes.arrayOf(PropTypes.string),
+  allowEmptyQuery: PropTypes.bool,
+  freeSolo: PropTypes.bool,
+  freeSoloConverter: PropTypes.func,
+};
+
+UserSelectAutoComplete.displayName = 'UserSelectAutoComplete';
+
+export default UserSelectAutoComplete;

package/components/autocomplete/domainselectautocomplete.page.styl

@@ -0,0 +1,6 @@
+.menu.domain-select
+  width: rem(200px)
+
+.domain-select__id
+  font-size: rem($font-size-small)
+  color: $userselect-uid-color

package/components/autocomplete/index.tsx

@@ -0,0 +1,110 @@
+import { AutoComplete as AutoCompleteFC } from '@hydrooj/components';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+
+export interface AutoCompleteOptions<Multi extends boolean = boolean> {
+  multi?: Multi;
+  defaultItems?: string;
+  width?: string;
+  height?: string;
+  classes?: string;
+  listStyle?: any;
+  allowEmptyQuery?: boolean;
+  freeSolo?: boolean;
+  freeSoloConverter?: any;
+  onChange?: (value) => any;
+  items?: () => Promise<any[]>;
+  render?: () => string;
+  text?: () => string;
+}
+
+export default class AutoComplete<Options extends Record<string, any> = object, Multi extends boolean = boolean> extends DOMAttachedObject {
+  static DOMAttachKey = 'ucwAutoCompleteInstance';
+  ref = null;
+  container = document.createElement('div');
+  options: AutoCompleteOptions<Multi> & Options;
+  component = ReactDOM.createRoot(this.container);
+  changeListener = [
+    (val) => this.$dom.val(val),
+  ];
+
+  constructor($dom, options = {} as Options & { component?: React.ComponentType<any>, props?: Record<string, any> }) {
+    super($dom);
+    this.options = {
+      items: async () => [],
+      render: () => '',
+      text: () => null,
+      multi: false as Multi,
+      ...options,
+    };
+    this.clear = this.clear.bind(this);
+    this.onChange = this.onChange.bind(this);
+    this.attach = this.attach.bind(this);
+    this.open = this.open.bind(this);
+    this.close = this.close.bind(this);
+    this.value = this.value.bind(this);
+    this.detach = this.detach.bind(this);
+    this.focus = this.focus.bind(this);
+    this.$dom.addClass('autocomplete-dummy').after(this.container);
+    // Note: use `setTimeout(fn, 0)` to ensure that code is executed after browser autofill
+    // also see https://stackoverflow.com/a/779785/13553984
+    setTimeout(() => this.attach(), 0);
+  }
+
+  clear(clearValue = true) {
+    if (!this.ref) return;
+    if (clearValue) this.ref.clear();
+    else this.ref.closeList();
+  }
+
+  onChange(val: string | ((v: string) => any)) {
+    if (typeof val === 'string') this.changeListener.forEach((f) => f(val));
+    else this.changeListener.push(val);
+  }
+
+  attach() {
+    const Component = this.options.component || AutoCompleteFC;
+    const Wrapper = (props) => {
+      const [value, setValue] = React.useState(props.value);
+      return <Component
+        ref={(ref) => { this.ref = ref; }}
+        onChange={(v) => {
+          setValue(v);
+          this.onChange(v);
+        }}
+        selectedKeys={(Array.isArray(value) ? value : value.split(',')).map((i) => i.trim()).filter((i) => i)}
+        height="34px"
+        {...this.options.props}
+      />;
+    };
+    this.component.render(<Wrapper value={this.$dom.val()} />);
+  }
+
+  open() {
+    if (!this.ref) return;
+    this.ref.triggerQuery();
+  }
+
+  close() {
+    if (!this.ref) return;
+    this.ref.closeList();
+  }
+
+  value(): Multi extends true ? (string | number)[] : string {
+    if (this.options.multi) return this.ref?.getSelectedItemKeys() ?? this.$dom.val();
+    return this.ref?.getSelectedItems()[0] ?? null;
+  }
+
+  detach() {
+    if (this.detached) return;
+    super.detach();
+    this.component.unmount();
+    this.$dom.removeClass('autocomplete-dummy');
+    this.container.parentNode.removeChild(this.container);
+  }
+
+  focus() {
+    this.ref.focus();
+  }
+}

package/components/autocomplete/problemselectautocomplete.page.styl

@@ -0,0 +1,6 @@
+.menu.problem-select
+  width: rem(200px)
+
+.problem-select__id
+  font-size: rem($font-size-small)
+  color: $userselect-uid-color

package/components/autocomplete/userselectautocomplete.page.styl

@@ -0,0 +1,6 @@
+.menu.user-select
+  width: rem(200px)
+
+.user-select__uid
+  font-size: rem($font-size-small)
+  color: $userselect-uid-color

package/components/browser-update.page.ts

@@ -0,0 +1,27 @@
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n, tpl } from 'vj/utils';
+import { InfoDialog } from './dialog';
+
+function isSupported() {
+  try {
+    if (!navigator.userAgent.includes('Chrome/')) return false;
+    const ver = +navigator.userAgent.split('Chrome/')[1].split('.')[0];
+    if (!Number.isSafeInteger(ver)) return false;
+    if (ver < 80) return false;
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+export default new AutoloadPage('browser-update', () => {
+  if (UserContext.priv !== -1) return; // Only warn superadmins
+  if ((+localStorage.getItem('su-browser-warn') || 0) - Date.now() < 24 * 3600 * 1000) return;
+  const key = 'warn::admin:unsupportedbrowser';
+  if (!isSupported() && i18n(key) !== key) {
+    new InfoDialog({
+      $body: tpl.typoMsg(i18n(key)),
+    }).open();
+    localStorage.setItem('su-browser-warn', Date.now().toString());
+  }
+});

package/components/calendar/calendar.page.styl

@@ -0,0 +1,129 @@
+.calendar__header
+  line-height: rem(45px)
+  text-align: center
+
+  h1
+    display: inline-block
+    line-height: inherit
+    width: rem(280px)
+
+  button
+    font-size: rem($font-size-title)
+    color: $text-3-color
+    padding: 0 rem(10px)
+    outline: 0
+
+    &:hover
+      color: $primary-color
+
+.calendar__week-title
+  table
+    width: 100%
+
+  th
+    width: 14.28%
+    padding: rem(20px 10px)
+    color: $supplementary-color
+
+.calendar__row
+  position: relative
+
+.calendar__row__bg
+  position: absolute
+  left: 0
+  top: 0
+  width: 100%
+  height: 100%
+
+  table
+    width: 100%
+    height: 100%
+
+  td
+    width: 14.28%
+    border: 1px solid $table-border-color
+
+    &.is-current-day
+      background: lighten($highlight-color, 85%)
+
+.calendar__row__content
+  min-height: rem(100px)
+  position: relative
+  z-index: 2
+  padding-bottom: rem(10px)
+
+  table
+    width: 100%
+
+  th
+    width: 14.28%
+    padding: rem(10px)
+    color: $text-2-color
+
+    &.is-inactive
+      opacity: 0.3
+
+    &.is-current-day
+      color: $highlight-color
+
+  td
+    position: relative
+    height: rem(24px)
+
+.calendar__banner
+  position: absolute
+  display: block
+  top: rem(2px)
+  left: rem(5px)
+  right: rem(5px)
+  height: rem(20px)
+  line-height: rem(20px)
+  padding: rem(0 5px)
+  font-size: rem($font-size-small)
+  border-radius: rem(5px)
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
+
+  &, &:visited, &:hover, &:active
+    color: #FFF
+    text-decoration: none
+
+  &.is-trunc-begin, &.is-snap-begin
+    border-top-left-radius: 0
+    border-bottom-left-radius: 0
+
+  &.is-trunc-end, &.is-snap-end
+    border-top-right-radius: 0
+    border-bottom-right-radius: 0
+
+  &.is-snap-begin
+    left: 0
+    padding-left: rem(10px)
+
+  &.is-snap-end
+    right: 0
+    padding-right: rem(10px)
+
+  &.is-masked
+    background-image: repeating-linear-gradient(
+      45deg,
+      rgba(#000, 0.1),
+      rgba(#000, 0.1) 10px,
+      rgba(#000, 0) 10px,
+      rgba(#000, 0) 20px
+    );
+
+  for key, value in $calendar-banner-color
+    &.color-{key}
+      background-color: value
+
+.calendar__body-container
+  position: relative
+
+.calendar__body.exit
+  position: absolute
+  left: 0
+  top: 0
+  width: 100%
+  user-select: none