@pgcorp/ui-kit 0.1.0

package/src/components/shared/_internal/SToastItem.css

@@ -0,0 +1,65 @@
+@reference "../../../styles/reference.css";
+
+.s-toast {
+  @apply flex min-w-0 w-full max-w-sm items-start gap-3 rounded-2xl px-4 py-3 pointer-events-auto;
+  background: var(--s-feedback-surface);
+  backdrop-filter: blur(var(--s-feedback-backdrop-blur));
+  box-shadow: var(--s-toast-shadow-info);
+  color: var(--color-text);
+}
+
+.s-toast-icon {
+  @apply mt-0.5 shrink-0;
+}
+
+.s-toast-content {
+  @apply min-w-0 flex-grow text-sm;
+}
+
+.s-toast-title {
+  @apply block text-sm font-semibold leading-5;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.s-toast-body {
+  @apply mt-1 whitespace-pre-line text-sm leading-5 text-[color:var(--color-text-secondary)];
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.s-toast-close {
+  @apply ml-auto shrink-0;
+}
+
+/* Severity: info */
+.s-toast[data-severity='info'] {
+  box-shadow: var(--s-toast-shadow-info);
+}
+.s-toast[data-severity='info'] .s-toast-icon {
+  @apply text-info-500;
+}
+
+/* Severity: success */
+.s-toast[data-severity='success'] {
+  box-shadow: var(--s-toast-shadow-success);
+}
+.s-toast[data-severity='success'] .s-toast-icon {
+  @apply text-success-500;
+}
+
+/* Severity: warn */
+.s-toast[data-severity='warn'] {
+  box-shadow: var(--s-toast-shadow-warn);
+}
+.s-toast[data-severity='warn'] .s-toast-icon {
+  @apply text-warn-500;
+}
+
+/* Severity: danger */
+.s-toast[data-severity='danger'] {
+  box-shadow: var(--s-toast-shadow-danger);
+}
+.s-toast[data-severity='danger'] .s-toast-icon {
+  @apply text-danger-500;
+}

package/src/components/shared/_internal/SToastItem.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="s-toast"
+    :data-severity="notification.severity"
+    :role="liveAttributes.role"
+    :aria-live="liveAttributes.ariaLive"
+    :aria-atomic="liveAttributes.ariaAtomic"
+  >
+    <div class="s-toast-icon">
+      <component
+        :is="presentation.icon"
+        class="h-5 w-5"
+      />
+    </div>
+
+    <div class="s-toast-content">
+      <strong class="s-toast-title">
+        {{ notification.title || presentation.fallbackTitle }}
+      </strong>
+      <p v-if="notification.message" class="s-toast-body">
+        {{ notification.message }}
+      </p>
+    </div>
+
+    <div class="s-toast-close">
+      <SButton
+        size="sm"
+        appearance="ghost"
+        icon-only
+        :leading-icon="X"
+        aria-label="Закрыть"
+        @click="emit('dismiss', notification.id)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { X } from '../../icons/sputnigUiIcons'
+import { resolveFeedbackLive, resolveFeedbackPresentation } from '../../../internal/feedbackPresentation'
+import type { Notification } from '../../../stores/useNotifierStore';
+import SButton from '../controls/SButton.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  notification: Notification
+}>()
+
+const emit = defineEmits<{
+  dismiss: [id: string]
+}>()
+const presentation = computed(() => resolveFeedbackPresentation(props.notification.severity))
+const liveAttributes = computed(() => resolveFeedbackLive(props.notification.severity, 'auto'))
+</script>
+<style lang="postcss" src="./SToastItem.css" scoped></style>