@pgcorp/ui-kit 0.1.0

package/src/components/shared/data-display/SCodeSearchPanel.vue

@@ -0,0 +1,327 @@
+<template>
+  <div v-bind="ownedAttrs.bindings()" class="s-code-search-panel" data-testid="s-code-search-panel">
+    <div class="s-code-search-panel__row s-code-search-panel__row--primary">
+      <div class="s-code-search-panel__field">
+        <SInputText
+          :model-value="searchValue"
+          :placeholder="findPlaceholder"
+          :aria-label="findPlaceholder"
+          :invalid="validatedSearchError !== undefined"
+          :error-message="validatedSearchError"
+          name="search"
+          size="sm"
+          @update:model-value="updateSearchValue"
+        />
+      </div>
+
+      <div class="s-code-search-panel__actions">
+        <SButton
+          severity="secondary"
+          appearance="outline"
+          shape="square"
+          size="sm"
+          icon-only
+          :leading-icon="ChevronUp"
+          :title="previousLabel"
+          :aria-label="previousLabel"
+          @click="emit('previous')"
+        />
+
+        <SButton
+          severity="primary"
+          shape="square"
+          size="sm"
+          icon-only
+          :leading-icon="ChevronDown"
+          :title="nextLabel"
+          :aria-label="nextLabel"
+          @click="emit('next')"
+        />
+
+        <SButton
+          severity="secondary"
+          appearance="outline"
+          shape="square"
+          size="sm"
+          icon-only
+          :leading-icon="ScanSearch"
+          :title="selectAllLabel"
+          :aria-label="selectAllLabel"
+          @click="emit('selectAll')"
+        />
+
+        <SButton
+          severity="secondary"
+          appearance="ghost"
+          shape="circle"
+          size="sm"
+          icon-only
+          :leading-icon="X"
+          :title="closeLabel"
+          :aria-label="closeLabel"
+          @click="emit('close')"
+        />
+      </div>
+    </div>
+
+    <div class="s-code-search-panel__row s-code-search-panel__row--options">
+      <SButton
+        :severity="caseSensitive ? 'primary' : 'secondary'"
+        shape="circle"
+        size="sm"
+        icon-only
+        :leading-icon="CaseSensitive"
+        :title="matchCaseLabel"
+        :aria-label="matchCaseLabel"
+        :pressed="caseSensitive"
+        @click="emit('update:caseSensitive', !caseSensitive)"
+      />
+
+      <SButton
+        :severity="regexp ? 'primary' : 'secondary'"
+        shape="circle"
+        size="sm"
+        icon-only
+        :leading-icon="Regex"
+        :title="regexpLabel"
+        :aria-label="regexpLabel"
+        :pressed="regexp"
+        @click="emit('update:regexp', !regexp)"
+      />
+
+      <SButton
+        :severity="wholeWord ? 'primary' : 'secondary'"
+        shape="circle"
+        size="sm"
+        icon-only
+        :leading-icon="WholeWord"
+        :title="wholeWordLabel"
+        :aria-label="wholeWordLabel"
+        :pressed="wholeWord"
+        @click="emit('update:wholeWord', !wholeWord)"
+      />
+    </div>
+
+    <div
+      v-if="canReplace"
+      class="s-code-search-panel__row s-code-search-panel__row--replace"
+    >
+      <div class="s-code-search-panel__field">
+        <SInputText
+          :model-value="replaceValue"
+          :placeholder="replacePlaceholder"
+          :aria-label="replacePlaceholder"
+          :invalid="validatedReplaceError !== undefined"
+          :error-message="validatedReplaceError"
+          name="replace"
+          size="sm"
+          @update:model-value="updateReplaceValue"
+        />
+      </div>
+
+      <div class="s-code-search-panel__actions">
+        <SButton
+          severity="primary"
+          shape="square"
+          size="sm"
+          icon-only
+          :leading-icon="Replace"
+          :title="replaceLabel"
+          :aria-label="replaceLabel"
+          @click="emit('replace')"
+        />
+
+        <SButton
+          severity="secondary"
+          appearance="outline"
+          shape="square"
+          size="sm"
+          icon-only
+          :leading-icon="ReplaceAll"
+          :title="replaceAllLabel"
+          :aria-label="replaceAllLabel"
+          @click="emit('replaceAll')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  CaseSensitive,
+  ChevronDown,
+  ChevronUp,
+  Regex,
+  Replace,
+  ReplaceAll,
+  ScanSearch,
+  WholeWord,
+  X,
+} from '../../icons/sputnigUiIcons';
+import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { validateNonEmptyString } from '../../../internal/runtimeContract';
+
+import SButton from '../controls/SButton.vue';
+import SInputText from '../controls/SInputText.vue';
+
+defineOptions({ inheritAttrs: false });
+
+export interface Props {
+  searchValue: string;
+  replaceValue: string;
+  caseSensitive: boolean;
+  regexp: boolean;
+  wholeWord: boolean;
+  canReplace?: boolean;
+  findPlaceholder?: string;
+  replacePlaceholder?: string;
+  nextLabel?: string;
+  previousLabel?: string;
+  selectAllLabel?: string;
+  matchCaseLabel?: string;
+  regexpLabel?: string;
+  wholeWordLabel?: string;
+  replaceLabel?: string;
+  replaceAllLabel?: string;
+  closeLabel?: string;
+  searchError?: string;
+  replaceError?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  canReplace: true,
+  findPlaceholder: 'Найти',
+  replacePlaceholder: 'Заменить',
+  nextLabel: 'Дальше',
+  previousLabel: 'Назад',
+  selectAllLabel: 'Все',
+  matchCaseLabel: 'С учётом регистра',
+  regexpLabel: 'Регулярное выражение',
+  wholeWordLabel: 'Слово целиком',
+  replaceLabel: 'Заменить',
+  replaceAllLabel: 'Заменить всё',
+  closeLabel: 'Закрыть',
+  searchError: undefined,
+  replaceError: undefined,
+});
+
+const emit = defineEmits<{
+  (e: 'update:searchValue', value: string): void;
+  (e: 'update:replaceValue', value: string): void;
+  (e: 'update:caseSensitive', value: boolean): void;
+  (e: 'update:regexp', value: boolean): void;
+  (e: 'update:wholeWord', value: boolean): void;
+  (e: 'next'): void;
+  (e: 'previous'): void;
+  (e: 'selectAll'): void;
+  (e: 'replace'): void;
+  (e: 'replaceAll'): void;
+  (e: 'close'): void;
+}>();
+const ownedAttrs = useOwnedAttrs({ component: 'SCodeSearchPanel', owner: 'code search panel root' });
+const validatedSearchError = computed(() => props.searchError === undefined
+  ? undefined
+  : validateNonEmptyString('SCodeSearchPanel', 'searchError', props.searchError));
+const validatedReplaceError = computed(() => props.replaceError === undefined
+  ? undefined
+  : validateNonEmptyString('SCodeSearchPanel', 'replaceError', props.replaceError));
+
+function emitExactStringUpdate(
+  coordinate: 'searchValue' | 'replaceValue',
+  value: unknown,
+): void {
+  if (typeof value !== 'string') {
+    throw new TypeError(
+      `SCodeSearchPanel: ${coordinate} update должен быть строкой. `
+      + `/ SCodeSearchPanel: ${coordinate} update must be a string`,
+    );
+  }
+  if (coordinate === 'searchValue') {
+    emit('update:searchValue', value);
+    return;
+  }
+  emit('update:replaceValue', value);
+}
+
+function updateSearchValue(value: unknown): void {
+  emitExactStringUpdate('searchValue', value);
+}
+
+function updateReplaceValue(value: unknown): void {
+  emitExactStringUpdate('replaceValue', value);
+}
+</script>
+
+<style lang="postcss" scoped>
+@reference "../../../styles/reference.css";
+
+.s-code-search-panel {
+  @apply flex flex-col gap-2.5 border border-surface-200 bg-surface-0 px-3.5 py-3 text-surface-800;
+  @apply dark:border-surface-700 dark:bg-surface-900 dark:text-surface-100;
+  border-radius: var(--s-code-search-panel-radius);
+  box-shadow: var(--s-code-search-panel-shadow);
+  backdrop-filter: var(--s-code-search-panel-backdrop-filter);
+}
+
+.s-code-search-panel__row {
+  @apply flex min-w-0 items-center gap-2;
+}
+
+.s-code-search-panel__row--primary {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.s-code-search-panel__row--options {
+  @apply justify-start gap-1.5 px-0.5;
+}
+
+.s-code-search-panel__row--replace {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.s-code-search-panel__field {
+  @apply min-w-0;
+}
+
+.s-code-search-panel__actions {
+  @apply flex items-center gap-1.5;
+}
+
+@media (max-width: 1024px) {
+  .s-code-search-panel__row--primary,
+  .s-code-search-panel__row--replace {
+    grid-template-columns: 1fr;
+  }
+
+  .s-code-search-panel__row--primary > .s-code-search-panel__field,
+  .s-code-search-panel__row--replace > .s-code-search-panel__field {
+    grid-column: 1 / -1;
+  }
+
+  .s-code-search-panel__actions {
+    @apply justify-end;
+  }
+}
+
+@media (max-width: 640px) {
+  .s-code-search-panel {
+    @apply px-3.5 py-3;
+  }
+
+  .s-code-search-panel__row {
+    @apply gap-2;
+  }
+
+  .s-code-search-panel__row--options {
+    @apply gap-2 px-0;
+  }
+
+  .s-code-search-panel__actions {
+    @apply flex-wrap justify-end;
+  }
+}
+</style>

package/src/components/shared/data-display/SCopyField.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { Copy } from '../../icons/sputnigUiIcons'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useNotifier } from '../../../composables/useNotifier'
+import { useClipboard } from '../../../composables/useClipboard'
+import SInputText from '../controls/SInputText.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    value: string
+    helpText?: string
+    placeholder?: string
+    disabled?: boolean
+    monospace?: boolean
+    successMessage?: string
+    unavailableMessage?: string
+    errorMessage?: string
+  }>(),
+  {
+    helpText: undefined,
+    placeholder: '',
+    disabled: false,
+    monospace: false,
+    successMessage: 'Значение скопировано',
+    unavailableMessage: 'Буфер обмена недоступен в этом браузере.',
+    errorMessage: 'Не удалось скопировать значение.',
+  },
+)
+
+const notifier = useNotifier()
+const { copyText } = useClipboard()
+const ownedAttrs = useOwnedAttrs({ component: 'SCopyField', owner: 'copy field input owner' })
+
+async function copyValue() {
+  if (props.disabled || !props.value) {
+    return
+  }
+
+  const result = await copyText(props.value)
+  if (result.status === 'copied') {
+    notifier.success({ message: props.successMessage })
+    return
+  }
+
+  notifier.danger({
+    title: 'Ошибка копирования',
+    message: result.status === 'unavailable'
+      ? props.unavailableMessage
+      : result.status === 'empty'
+        ? 'Нет значения для копирования.'
+        : `${props.errorMessage} ${result.error.message}`,
+  })
+}
+</script>
+
+<template>
+  <SInputText
+    v-bind="ownedAttrs.bindings()"
+    :model-value="value"
+    :label="label"
+    :help-text="helpText"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :monospace="monospace"
+    :trailing-action="{
+      label: 'Скопировать',
+      title: 'Скопировать',
+      icon: Copy,
+      disabled: disabled || !value,
+    }"
+    readonly
+    @trailing-action="copyValue"
+  />
+</template>

package/src/components/shared/data-display/SDocBlock.css

@@ -0,0 +1,136 @@
+@reference "../../../styles/reference.css";
+
+.s-doc-block {
+  @apply flex min-w-0 max-w-full flex-col;
+}
+
+.s-doc-block :deep(.prose) {
+  @apply min-w-0;
+  font-size: inherit;
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+
+.s-doc-block :deep(.prose p),
+.s-doc-block :deep(.prose ul),
+.s-doc-block :deep(.prose ol),
+.s-doc-block :deep(.prose blockquote),
+.s-doc-block :deep(.prose pre),
+.s-doc-block :deep(.prose table),
+.s-doc-block :deep(.prose hr) {
+  margin-top: 0;
+  margin-bottom: 0.625rem;
+}
+
+.s-doc-block :deep(.prose h1),
+.s-doc-block :deep(.prose h2),
+.s-doc-block :deep(.prose h3),
+.s-doc-block :deep(.prose h4),
+.s-doc-block :deep(.prose h5),
+.s-doc-block :deep(.prose h6) {
+  margin-top: 0.875rem;
+  margin-bottom: 0.5rem;
+  line-height: 1.25;
+}
+
+.s-doc-block :deep(.prose li) {
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+}
+
+.s-doc-block :deep(.prose li > p),
+.s-doc-block :deep(.prose li > ul),
+.s-doc-block :deep(.prose li > ol) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.s-doc-block :deep(.prose p),
+.s-doc-block :deep(.prose li),
+.s-doc-block :deep(.prose blockquote),
+.s-doc-block :deep(.prose td),
+.s-doc-block :deep(.prose th),
+.s-doc-block :deep(.prose a),
+.s-doc-block :deep(.prose strong),
+.s-doc-block :deep(.prose em),
+.s-doc-block :deep(.prose code:not(pre code)) {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.s-doc-block :deep(.prose [data-s-doc-align='left']) {
+  text-align: left;
+}
+
+.s-doc-block :deep(.prose [data-s-doc-align='center']) {
+  text-align: center;
+}
+
+.s-doc-block :deep(.prose [data-s-doc-align='right']) {
+  text-align: right;
+}
+
+.s-doc-block :deep(.prose > :first-child) {
+  margin-top: 0;
+}
+
+.s-doc-block :deep(.prose > :last-child) {
+  margin-bottom: 0;
+}
+
+.s-doc-block--radius-none :deep(pre),
+.s-doc-block--radius-none :deep(.prose pre),
+.s-doc-block--radius-none .fallback-pre {
+  border-radius: 0;
+}
+
+.s-doc-block-header {
+  @apply mb-2 flex min-w-0 flex-wrap items-start justify-between gap-2;
+}
+.s-doc-block-info {
+  @apply flex min-w-0 flex-wrap items-center gap-2 text-surface-500;
+}
+.s-doc-block-filename {
+  @apply min-w-0 font-mono text-xs text-surface-700 dark:text-surface-300;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+.s-doc-block-language {
+  @apply text-xs;
+}
+.s-doc-block-actions {
+  @apply shrink-0;
+}
+.fallback-pre {
+  @apply text-xs font-mono bg-surface-100/50 dark:bg-surface-900/50 p-2 rounded-md whitespace-pre-wrap break-words;
+}
+
+.s-doc-block :deep(pre),
+.s-doc-block :deep(.prose pre) {
+  max-width: 100%;
+  background-color: var(--s-document-code-surface);
+  color: var(--s-document-code-foreground);
+  border-radius: var(--s-document-code-radius);
+  border: 1px solid var(--s-document-code-border);
+  padding: var(--s-document-code-block-padding);
+  overflow: auto;
+}
+
+.s-doc-block :deep(pre code),
+.s-doc-block :deep(.prose pre code),
+.s-doc-block :deep(code.hljs) {
+  background: transparent;
+  color: inherit;
+  font-family: var(--font-mono);
+  font-size: var(--s-document-code-font-size);
+}
+
+.s-doc-block :deep(code:not(pre code)),
+.s-doc-block :deep(.prose code:not(pre code)) {
+  background-color: var(--s-document-code-surface);
+  color: var(--s-document-code-foreground);
+  padding: var(--s-document-code-inline-padding);
+  border-radius: var(--s-document-code-radius);
+  border: 1px solid var(--s-document-code-border);
+}