platform-core-ng 21.1.0

package/styles/data/table/pattern-admin.scss

@@ -0,0 +1,136 @@
+@use '../../base/tokens' as tk;
+
+$admin-selectors: "table:not(.table-pattern-screen):not([data-table-pattern='screen']), .table-pattern-admin, [data-table-pattern='admin']";
+$admin-action-selectors: "table:not(.table-pattern-screen):not([data-table-pattern='screen']):not([SListPageTable]), .table-pattern-admin:not([SListPageTable]), [data-table-pattern='admin']:not([SListPageTable])";
+$table-row-hover-bg: color-mix(in srgb, #{tk.$color-primary-subtle} 44%, #{tk.$color-surface});
+$table-row-selected-bg: color-mix(in srgb, #{tk.$color-primary-subtle} 72%, #{tk.$color-surface});
+$table-checkbox-col-selected-bg: color-mix(in srgb, #{tk.$color-primary-subtle} 88%, #{tk.$color-surface});
+$table-selected-outline: color-mix(in srgb, #{tk.$color-primary} 20%, transparent);
+$table-checkbox-col-width: 3.5rem;
+
+#{ $admin-selectors } {
+  border-radius: tk.$radius-common-m;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  thead {
+    background-color: tk.$color-surface-soft;
+
+    tr th {
+      position: sticky;
+      top: var(--admin-table-head-sticky-top, 0);
+      z-index: 1;
+      padding: tk.$space-2 tk.$space-3;
+      border-right: 1px solid tk.$color-border;
+      border-bottom: 1px solid tk.$color-divider;
+      background: tk.$color-surface-soft;
+      font-size: tk.$font-size-xs;
+      font-weight: tk.$font-weight-semibold;
+      text-align: left;
+      white-space: nowrap;
+      word-break: keep-all;
+      color: tk.$color-text-primary;
+
+      &:first-child:has(input[type='checkbox']) {
+        width: $table-checkbox-col-width;
+        min-width: $table-checkbox-col-width;
+        height: 1rem;
+        padding: tk.$space-2-5 tk.$space-2;
+        text-align: center;
+      }
+
+      &:last-child {
+        border-right-width: 0;
+      }
+    }
+  }
+
+  tbody tr {
+    transition: background-color 160ms ease, box-shadow 160ms ease;
+
+    td {
+      padding: tk.$space-2 tk.$space-3;
+      border-right: 1px solid tk.$color-border;
+      border-bottom: 1px solid tk.$color-divider;
+      text-align: left;
+      font-size: tk.$font-size-xs;
+      white-space: normal;
+      overflow-wrap: break-word;
+      transition:
+        background-color 160ms ease,
+        border-color 160ms ease,
+        color 160ms ease;
+
+      &:last-child {
+        border-right-width: 0;
+      }
+    }
+
+    td[class*='checkbox-col'],
+    td:first-child:has(input[type='checkbox']) {
+      width: $table-checkbox-col-width;
+      min-width: $table-checkbox-col-width;
+      padding-left: tk.$space-2;
+      padding-right: tk.$space-2;
+      text-align: center;
+    }
+
+    &:hover td {
+      background: $table-row-hover-bg;
+    }
+
+    &:last-child td {
+      border-bottom-width: 0;
+    }
+  }
+
+  tbody tr.is-selected,
+  tbody tr.selected,
+  tbody tr[aria-selected='true'],
+  tbody tr[data-selected='true'],
+  tbody tr:has(> td[class*='checkbox-col'] input[type='checkbox']:checked),
+  tbody tr:has(> td:first-child input[type='checkbox']:checked) {
+    td {
+      background: $table-row-selected-bg;
+      border-bottom-color: $table-selected-outline;
+    }
+
+    td[class*='checkbox-col'],
+    td:first-child:has(input[type='checkbox']:checked) {
+      background: $table-checkbox-col-selected-bg;
+    }
+  }
+
+  thead th[class*='checkbox-col'],
+  tbody td[class*='checkbox-col'],
+  thead th:first-child:has(input[type='checkbox']),
+  tbody td:first-child:has(input[type='checkbox']) {
+    text-align: center;
+
+    input[type='checkbox'] {
+      display: inline-grid;
+      margin-inline: auto;
+      vertical-align: middle;
+    }
+  }
+
+  tfoot tr td {
+    padding-top: tk.$space-1;
+    padding-bottom: tk.$space-1;
+    border-top: 1px solid tk.$color-border;
+    cursor: pointer;
+  }
+
+  thead th:last-child,
+  tbody td:last-child {
+    white-space: nowrap;
+  }
+}
+
+#{ $admin-action-selectors }:has(tbody td:last-child[data-label='操作']) {
+  thead th:last-child,
+  tbody td:last-child {
+    width: var(--admin-table-action-col-width, 5rem);
+    min-width: var(--admin-table-action-col-width, 5rem);
+  }
+}

package/styles/data/table/pattern-screen.scss

@@ -0,0 +1,36 @@
+@use '../../base/tokens' as tk;
+
+.table-pattern-screen,
+[data-table-pattern='screen'] {
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 0.5rem;
+  background: rgba(7, 16, 29, 0.72);
+  backdrop-filter: blur(12px);
+
+  thead {
+    background: rgba(59, 115, 255, 0.12);
+
+    tr th {
+      padding: tk.$space-3 tk.$space-4;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
+      color: rgba(255, 255, 255, 0.88);
+      font-size: tk.$font-size-md;
+      font-weight: tk.$font-weight-semibold;
+      text-align: left;
+      white-space: nowrap;
+    }
+  }
+
+  tbody tr td {
+    padding: tk.$space-3 tk.$space-4;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    color: rgba(255, 255, 255, 0.84);
+    font-size: tk.$font-size-md;
+  }
+
+  tbody tr:last-child td {
+    border-bottom-width: 0;
+  }
+}

package/styles/data/table.scss

@@ -0,0 +1,3 @@
+@use './table/base';
+@use './table/pattern-admin';
+@use './table/pattern-screen';

package/styles/form/checkbox.scss

@@ -0,0 +1,97 @@
+@use '../base/tokens' as tk;
+@use '../base/interaction-mixins' as mx;
+
+$checkbox-size: 1rem;
+$checkbox-radius: calc(#{tk.$radius-common-s} * 0.9);
+$checkbox-border: tk.$color-border-strong;
+$checkbox-border-hover: tk.$color-primary-hover;
+$checkbox-bg: tk.$color-surface;
+$checkbox-bg-hover: tk.$color-primary-subtle;
+$checkbox-bg-checked: tk.$color-primary;
+$checkbox-icon: tk.$color-fg-z1;
+$checkbox-label: tk.$color-text-primary;
+$checkbox-help: tk.$color-text-secondary;
+$checkbox-error: tk.$color-error;
+$checkbox-disabled-border: tk.$color-border;
+$checkbox-disabled-bg: tk.$color-surface-soft;
+$checkbox-disabled-label: tk.$color-text-disabled;
+$space-1: tk.$space-1;
+$space-2: tk.$space-2;
+$space-3: tk.$space-3;
+$space-4: tk.$space-4;
+
+input[type='checkbox']:not([role='switch']) {
+  appearance: none;
+  position: relative;
+  flex: 0 0 auto;
+  width: $checkbox-size;
+  height: $checkbox-size;
+  margin: 0;
+  border: 1px solid $checkbox-border;
+  border-radius: $checkbox-radius;
+  background: $checkbox-bg;
+  display: inline-grid;
+  place-content: center;
+  cursor: pointer;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+
+  &::after {
+    content: '';
+    width: 0.3rem;
+    height: 0.55rem;
+    border-right: 2px solid $checkbox-icon;
+    border-bottom: 2px solid $checkbox-icon;
+    transform: translateY(-0.04rem) rotate(45deg) scale(0);
+    transform-origin: center;
+    transition: transform 140ms ease;
+  }
+
+  &:hover {
+    border-color: $checkbox-border-hover;
+    background: $checkbox-bg-hover;
+  }
+
+  &:checked,
+  &:indeterminate {
+    border-color: $checkbox-bg-checked;
+    background: $checkbox-bg-checked;
+  }
+
+  &:checked::after {
+    transform: translateY(-0.04rem) rotate(45deg) scale(1);
+  }
+
+  &:indeterminate::after {
+    width: 0.5rem;
+    height: 0;
+    border-right: 0;
+    border-bottom: 2px solid $checkbox-icon;
+    transform: scale(1);
+  }
+
+  &:focus-visible {
+    @include mx.focus-ring(2px, tk.$color-focus-ring, tk.$color-primary);
+  }
+
+  @include mx.disabled-state {
+    border-color: $checkbox-disabled-border;
+    background: $checkbox-disabled-bg;
+    cursor: not-allowed;
+    box-shadow: none;
+
+    &::after {
+      border-color: $checkbox-disabled-label;
+    }
+
+    & + .checkbox__content,
+    & + .form-checkbox__content,
+    & + .checkbox__label,
+    & + .form-checkbox__label {
+      color: $checkbox-disabled-label;
+    }
+  }
+}

package/styles/form/input.scss

@@ -0,0 +1,201 @@
+@use '../base/tokens' as tk;
+
+@mixin platform-text-input {
+  box-sizing: border-box;
+  height: var(--platform-input-height, var(--input-height, 32px));
+  padding: 0 var(--platform-input-padding-x, var(--input-padding-x, 12px));
+  border: 1px solid var(--platform-control-border, var(--input-border, tk.$input-border));
+  border-radius: var(--platform-input-radius, var(--input-radius, tk.$input-radius));
+  background: var(--platform-control-bg, var(--input-bg, tk.$input-bg));
+  color: var(--platform-control-color, var(--input-text, tk.$input-text));
+  font: inherit;
+  font-size: var(--platform-input-font-size, var(--input-font-size, tk.$input-font-size));
+  font-weight: var(--input-font-weight, tk.$input-font-weight);
+  line-height: var(--platform-input-line-height, var(--platform-control-line-height, tk.$platform-control-line-height));
+  outline: none;
+  box-shadow: none;
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease;
+
+  &::placeholder {
+    color: var(--platform-control-placeholder, var(--input-placeholder, tk.$input-placeholder));
+    opacity: 1;
+  }
+
+  &:hover:not(:disabled):not([readonly]) {
+    border-color: var(--platform-control-border-hover, var(--input-hover-border, tk.$input-hover-border));
+    background: var(--platform-control-bg-hover, var(--input-bg, tk.$input-bg));
+  }
+
+  &:focus,
+  &:focus-visible {
+    border-color: var(--platform-control-focus, var(--input-focus-border, tk.$input-focus-border));
+    box-shadow: 0 0 0 2px var(--platform-control-focus-ring, var(--input-focus-ring, tk.$input-focus-ring));
+  }
+
+  &:disabled {
+    border-color: var(--platform-control-border, var(--input-border, tk.$input-border));
+    background: var(--platform-control-disabled-bg, var(--input-disabled-bg, tk.$input-disabled-bg));
+    color: var(--platform-control-disabled-color, var(--input-disabled-text, tk.$input-disabled-text));
+    cursor: not-allowed;
+  }
+
+  &[readonly] {
+    background: var(--platform-control-readonly-bg, var(--input-disabled-bg, tk.$input-disabled-bg));
+    cursor: default;
+  }
+
+  &[aria-invalid='true'],
+  &.is-error,
+  .is-error & {
+    border-color: var(--platform-control-error, var(--input-error, tk.$input-error));
+
+    &:focus,
+    &:focus-visible {
+      border-color: var(--platform-control-error, var(--input-error, tk.$input-error));
+      box-shadow: 0 0 0 2px var(--platform-control-error-ring, var(--input-error-ring, tk.$input-error-ring));
+    }
+  }
+}
+
+input:not([type]):not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='text']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='search']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='number']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='password']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='email']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='tel']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='url']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='date']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='datetime-local']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='month']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='time']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']),
+input[type='week']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']) {
+  @include platform-text-input;
+}
+
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-decoration {
+  appearance: none;
+}
+
+input[type='search']:not([ngComboboxInput]):not([variant='bare']):not([data-platform-input='bare']):not([variant='soft']):not([data-platform-input='soft']):not([data-platform-search='soft']):not(.input-search--soft) {
+  --platform-input-height: var(--input-search-height, var(--input-height, 32px));
+  --platform-control-bg: var(--input-search-bg, tk.$input-search-bg);
+  --platform-control-bg-hover: var(--input-search-bg, tk.$input-search-bg);
+  --platform-control-border: var(--input-search-border, transparent);
+
+  &:focus,
+  &:focus-visible {
+    --platform-control-bg: var(--input-search-focus-bg, tk.$input-search-focus-bg);
+    --platform-control-border: var(--input-search-focus-border, var(--input-focus-border, tk.$input-focus-border));
+  }
+}
+
+input[type='search'][variant='soft'],
+input[type='search'][data-platform-input='soft'],
+input[type='search'][data-platform-search='soft'],
+input[type='search'].input-search--soft {
+  --platform-input-height: var(--input-soft-search-height, 36px);
+  --platform-input-radius: var(--input-soft-search-radius, tk.$input-soft-search-radius);
+  --platform-control-bg: var(--input-soft-search-bg, tk.$input-soft-search-bg);
+  --platform-control-bg-hover: var(--input-soft-search-bg, tk.$input-soft-search-bg);
+  --platform-control-border: transparent;
+
+  border: 0;
+
+  &:focus,
+  &:focus-visible {
+    --platform-control-bg: var(--input-search-focus-bg, tk.$input-search-focus-bg);
+
+    border: 0;
+    box-shadow: var(--input-soft-search-focus-shadow, tk.$input-soft-search-focus-shadow);
+  }
+}
+
+input[pInput][size='sm'],
+input[pInput][data-platform-input-size='sm'] {
+  --platform-input-height: var(--input-height-sm);
+  --platform-input-padding-x: var(--input-padding-x-sm);
+  --platform-input-radius: var(--input-radius-sm);
+  --platform-input-font-size: var(--input-font-size-sm);
+  --platform-input-line-height: var(--platform-control-line-height-sm);
+}
+
+input[pInput][size='md'],
+input[pInput][data-platform-input-size='md'] {
+  --platform-input-height: var(--input-height);
+  --platform-input-padding-x: var(--input-padding-x);
+  --platform-input-radius: var(--input-radius);
+  --platform-input-font-size: var(--input-font-size);
+  --platform-input-line-height: var(--platform-control-line-height-sm);
+}
+
+input[pInput][size='lg'],
+input[pInput][data-platform-input-size='lg'] {
+  --platform-input-height: var(--input-height-lg);
+  --platform-input-padding-x: var(--input-padding-x-lg);
+  --platform-input-radius: var(--input-radius-lg);
+  --platform-input-font-size: var(--input-font-size-lg);
+  --platform-input-line-height: var(--platform-control-line-height-md);
+}
+
+input[pInput][variant='bare'],
+input[pInput][data-platform-input='bare'] {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  height: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  background: transparent;
+  box-shadow: none;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  appearance: none;
+}
+
+input[pInput][variant='bare']::placeholder,
+input[pInput][data-platform-input='bare']::placeholder {
+  color: var(--platform-control-placeholder, var(--input-placeholder, #9ca3af));
+  opacity: 1;
+}
+
+input[pInput][variant='bare']:focus,
+input[pInput][data-platform-input='bare']:focus {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.form-error,
+.input-error,
+.form-input__error,
+.form-field__error {
+  margin-top: var(--input-error-margin-top, tk.$input-error-margin-top);
+  color: var(--input-error, tk.$input-error);
+  font-size: var(--input-error-font-size, tk.$input-error-font-size);
+  line-height: var(--line-height-xs, tk.$line-height-xs);
+}
+
+.input-icon,
+.form-input__icon,
+.form-field__icon {
+  width: var(--input-icon-size, tk.$input-icon-size);
+  height: var(--input-icon-size, tk.$input-icon-size);
+  opacity: var(--input-icon-opacity, tk.$input-icon-opacity);
+}
+
+button.input-icon,
+button.form-input__icon,
+button.form-field__icon {
+  &:hover {
+    opacity: var(--input-icon-opacity-hover, tk.$input-icon-opacity-hover);
+  }
+}

package/styles/form/number.scss

@@ -0,0 +1,17 @@
+input[type='number'] {
+  width: 100%;
+  min-width: 0;
+}
+
+input[type='number'].number-input__control,
+input[type='number'].form-number__control {
+  height: var(--platform-input-height, var(--input-height, 32px));
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+input[type='number']::-webkit-outer-spin-button,
+input[type='number']::-webkit-inner-spin-button {
+  margin: 0;
+}

package/styles/form/radio.scss

@@ -0,0 +1,84 @@
+@use '../base/tokens' as tk;
+@use '../base/interaction-mixins' as mx;
+
+$radio-size: 1rem;
+$radio-dot-size: 0.5rem;
+$radio-border: tk.$color-border-strong;
+$radio-border-hover: tk.$color-primary-hover;
+$radio-bg: tk.$color-surface;
+$radio-bg-hover: tk.$color-primary-subtle;
+$radio-bg-checked: tk.$color-primary;
+$radio-dot: tk.$color-fg-z1;
+$radio-label: tk.$color-text-primary;
+$radio-help: tk.$color-text-secondary;
+$radio-error: tk.$color-error;
+$radio-disabled-border: tk.$color-border;
+$radio-disabled-bg: tk.$color-surface-soft;
+$radio-disabled-label: tk.$color-text-disabled;
+
+input[type='radio'] {
+  appearance: none;
+  position: relative;
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-content: center;
+  width: $radio-size;
+  height: $radio-size;
+  margin: 0;
+  border: 1px solid $radio-border;
+  border-radius: 999px;
+  background: $radio-bg;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+
+  &::after {
+    content: '';
+    width: $radio-dot-size;
+    height: $radio-dot-size;
+    border-radius: 999px;
+    background: $radio-dot;
+    transform: scale(0);
+    transition: transform 140ms ease;
+  }
+
+  &:hover {
+    border-color: $radio-border-hover;
+    background: $radio-bg-hover;
+  }
+
+  &:checked {
+    border-color: $radio-bg-checked;
+    background: $radio-bg-checked;
+  }
+
+  &:checked::after {
+    transform: scale(1);
+  }
+
+  &:focus-visible {
+    @include mx.focus-ring(2px, tk.$color-focus-ring, tk.$color-primary);
+  }
+
+  @include mx.disabled-state {
+    border-color: $radio-disabled-border;
+    background: $radio-disabled-bg;
+    cursor: not-allowed;
+    box-shadow: none;
+
+    &::after {
+      background: $radio-disabled-label;
+    }
+
+    & + .radio__content,
+    & + .form-radio__content,
+    & + .radio__label,
+    & + .form-radio__label {
+      color: $radio-disabled-label;
+    }
+  }
+}
+
+

package/styles/form/range.scss

@@ -0,0 +1,118 @@
+@use '../base/tokens' as tk;
+@use '../base/interaction-mixins' as mx;
+
+$range-track-height: 0.25rem;
+$range-thumb-size: 1rem;
+$range-track-bg: tk.$color-surface-soft;
+$range-fill-bg: tk.$color-primary;
+$range-thumb-bg: tk.$color-surface;
+$range-thumb-border: tk.$color-primary;
+$range-label: tk.$color-text-primary;
+$range-help: tk.$color-text-secondary;
+$range-disabled: tk.$color-text-disabled;
+
+input[type='range'] {
+  appearance: none;
+  width: 100%;
+  min-width: 0;
+  height: $range-thumb-size;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+
+  &::-webkit-slider-runnable-track {
+    height: $range-track-height;
+    border-radius: 999px;
+    background: linear-gradient(90deg, $range-fill-bg var(--range-progress, 0%), $range-track-bg var(--range-progress, 0%));
+  }
+
+  &::-webkit-slider-thumb {
+    appearance: none;
+    width: $range-thumb-size;
+    height: $range-thumb-size;
+    margin-top: calc((#{$range-track-height} - #{$range-thumb-size}) / 2);
+    border: 2px solid $range-thumb-border;
+    border-radius: 999px;
+    background: $range-thumb-bg;
+    box-shadow: tk.$shadow-common-s;
+    transition:
+      border-color 160ms ease,
+      box-shadow 160ms ease,
+      transform 160ms ease;
+  }
+
+  &::-moz-range-track {
+    height: $range-track-height;
+    border-radius: 999px;
+    background: $range-track-bg;
+  }
+
+  &::-moz-range-progress {
+    height: $range-track-height;
+    border-radius: 999px;
+    background: $range-fill-bg;
+  }
+
+  &::-moz-range-thumb {
+    width: $range-thumb-size;
+    height: $range-thumb-size;
+    border: 2px solid $range-thumb-border;
+    border-radius: 999px;
+    background: $range-thumb-bg;
+    box-shadow: tk.$shadow-common-s;
+    transition:
+      border-color 160ms ease,
+      box-shadow 160ms ease,
+      transform 160ms ease;
+  }
+
+  &:hover::-webkit-slider-thumb {
+    border-color: tk.$color-primary-hover;
+    transform: scale(1.05);
+  }
+
+  &:hover::-moz-range-thumb {
+    border-color: tk.$color-primary-hover;
+    transform: scale(1.05);
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:focus-visible::-webkit-slider-thumb {
+    @include mx.focus-ring(2px, tk.$color-focus-ring, tk.$color-primary, false);
+  }
+
+  &:focus-visible::-moz-range-thumb {
+    @include mx.focus-ring(2px, tk.$color-focus-ring, tk.$color-primary, false);
+  }
+
+  @include mx.disabled-state {
+    cursor: not-allowed;
+
+    &::-webkit-slider-runnable-track {
+      background: tk.$color-divider;
+    }
+
+    &::-webkit-slider-thumb {
+      border-color: $range-disabled;
+      background: tk.$color-surface-soft;
+      box-shadow: none;
+      transform: none;
+    }
+
+    &::-moz-range-track,
+    &::-moz-range-progress {
+      background: tk.$color-divider;
+    }
+
+    &::-moz-range-thumb {
+      border-color: $range-disabled;
+      background: tk.$color-surface-soft;
+      box-shadow: none;
+      transform: none;
+    }
+  }
+}