niuma-ui 1.0.0

package/src/components/RsTimePickerColumns.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { computed, nextTick, onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
+import { useRsI18n } from '../composables/useRsI18n'
+import {
+  parseTimeValue,
+  rangeInclusive,
+  scheduleAfterPaint,
+} from './time-picker-utils'
+
+const model = defineModel<string>({ default: '00:00' })
+
+const props = withDefaults(
+  defineProps<{
+    minuteStep?: number
+    second?: boolean
+    disabled?: boolean
+    isUnitDisabled?: (unit: 'hour' | 'minute' | 'second', value: number) => boolean
+  }>(),
+  {
+    minuteStep: 1,
+    second: false,
+    disabled: false,
+  },
+)
+
+const { t } = useRsI18n()
+
+const hourListRef = useTemplateRef<HTMLDivElement>('hourListRef')
+const minuteListRef = useTemplateRef<HTMLDivElement>('minuteListRef')
+const secondListRef = useTemplateRef<HTMLDivElement>('secondListRef')
+
+let cancelScheduledScroll: (() => void) | undefined
+
+const hourOptions = computed(() => rangeInclusive(23))
+const minuteOptions = computed(() =>
+  rangeInclusive(59).filter((value) => value % props.minuteStep === 0),
+)
+const secondOptions = computed(() => rangeInclusive(59))
+
+const parts = computed(() => {
+  const parsed = parseTimeValue(model.value, props.second)
+  if (parsed) {
+    return { hour: parsed.hour, minute: parsed.minute, second: parsed.second }
+  }
+  return { hour: 0, minute: 0, second: 0 }
+})
+
+function isDisabled(unit: 'hour' | 'minute' | 'second', value: number): boolean {
+  return props.isUnitDisabled?.(unit, value) ?? false
+}
+
+function scrollColumn(
+  container: HTMLDivElement | null,
+  unit: 'hour' | 'minute' | 'second',
+  value: number,
+): void {
+  if (!container) return
+  const selected = container.querySelector<HTMLElement>(
+    `[data-unit="${unit}"][data-value="${value}"]`,
+  )
+  selected?.scrollIntoView({ block: 'center', behavior: 'auto' })
+}
+
+function scrollToSelection(): void {
+  scrollColumn(hourListRef.value, 'hour', parts.value.hour)
+  scrollColumn(minuteListRef.value, 'minute', parts.value.minute)
+  if (props.second) {
+    scrollColumn(secondListRef.value, 'second', parts.value.second)
+  }
+}
+
+function scrollToSelectionAfterPaint(): void {
+  cancelScheduledScroll?.()
+  cancelScheduledScroll = scheduleAfterPaint(scrollToSelection)
+}
+
+function selectUnit(unit: 'hour' | 'minute' | 'second', value: number): void {
+  if (isDisabled(unit, value) || props.disabled) return
+  const next = { ...parts.value, [unit]: value }
+  model.value = props.second
+    ? `${String(next.hour).padStart(2, '0')}:${String(next.minute).padStart(2, '0')}:${String(next.second).padStart(2, '0')}`
+    : `${String(next.hour).padStart(2, '0')}:${String(next.minute).padStart(2, '0')}`
+}
+
+watch(
+  () => [parts.value.hour, parts.value.minute, parts.value.second, props.second] as const,
+  () => {
+    nextTick(scrollToSelection)
+  },
+  { flush: 'post' },
+)
+
+onMounted(() => {
+  scrollToSelectionAfterPaint()
+})
+
+onUnmounted(() => {
+  cancelScheduledScroll?.()
+})
+
+defineExpose({
+  scrollToSelection,
+  scrollToSelectionAfterPaint,
+})
+</script>
+
+<template>
+  <div class="rs-time-columns" :class="{ 'rs-time-columns--seconds': second }">
+    <div class="rs-time-columns__column">
+      <span class="rs-time-columns__label">{{ t('timePicker.hour') }}</span>
+      <div ref="hourListRef" class="rs-time-columns__list">
+        <button
+          v-for="option in hourOptions"
+          :key="option"
+          type="button"
+          class="rs-time-columns__item"
+          :class="{ 'rs-time-columns__item--active': parts.hour === option }"
+          data-unit="hour"
+          :data-value="option"
+          :disabled="disabled || isDisabled('hour', option)"
+          @click="selectUnit('hour', option)"
+        >
+          {{ String(option).padStart(2, '0') }}
+        </button>
+      </div>
+    </div>
+
+    <div class="rs-time-columns__column">
+      <span class="rs-time-columns__label">{{ t('timePicker.minute') }}</span>
+      <div ref="minuteListRef" class="rs-time-columns__list">
+        <button
+          v-for="option in minuteOptions"
+          :key="option"
+          type="button"
+          class="rs-time-columns__item"
+          :class="{ 'rs-time-columns__item--active': parts.minute === option }"
+          data-unit="minute"
+          :data-value="option"
+          :disabled="disabled || isDisabled('minute', option)"
+          @click="selectUnit('minute', option)"
+        >
+          {{ String(option).padStart(2, '0') }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="second" class="rs-time-columns__column">
+      <span class="rs-time-columns__label">{{ t('timePicker.second') }}</span>
+      <div ref="secondListRef" class="rs-time-columns__list">
+        <button
+          v-for="option in secondOptions"
+          :key="option"
+          type="button"
+          class="rs-time-columns__item"
+          :class="{ 'rs-time-columns__item--active': parts.second === option }"
+          data-unit="second"
+          :data-value="option"
+          :disabled="disabled || isDisabled('second', option)"
+          @click="selectUnit('second', option)"
+        >
+          {{ String(option).padStart(2, '0') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rs-time-columns {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--rs-space-sm);
+}
+.rs-time-columns--seconds {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.rs-time-columns__column {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.rs-time-columns__label {
+  text-align: center;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--rs-muted);
+}
+.rs-time-columns__list {
+  max-height: 10rem;
+  overflow-y: auto;
+  padding: 0.25rem;
+  border: 1px solid var(--rs-border-subtle);
+  border-radius: var(--rs-radius-sm);
+  background: color-mix(in srgb, var(--rs-surface) 72%, transparent);
+}
+.rs-time-columns__item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--rs-radius-sm);
+  padding: 0.375rem 0;
+  background: transparent;
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  cursor: pointer;
+  transition: background var(--rs-transition-fast), color var(--rs-transition-fast);
+}
+.rs-time-columns__item:hover:not(:disabled) {
+  background: var(--rs-surface-hover);
+}
+.rs-time-columns__item--active {
+  background: var(--rs-primary);
+  color: var(--rs-primary-foreground);
+}
+.rs-time-columns__item--active:hover:not(:disabled) {
+  opacity: 0.92;
+}
+.rs-time-columns__item:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+</style>

package/src/components/RsToaster.vue

@@ -0,0 +1,396 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { Toaster } from 'vue-sonner'
+import { rsConfigKey } from '../composables/useRsConfig'
+import type { RsToastPosition } from './overlay-utils'
+import { RS_TOAST_DEFAULT_GAP, RS_TOAST_DEFAULT_POSITION } from './overlay-utils'
+
+withDefaults(
+  defineProps<{
+    position?: RsToastPosition
+    closeButton?: boolean
+    richColors?: boolean
+    expand?: boolean
+    gap?: number
+  }>(),
+  {
+    position: RS_TOAST_DEFAULT_POSITION,
+    closeButton: true,
+    richColors: false,
+    expand: true,
+    gap: RS_TOAST_DEFAULT_GAP,
+  },
+)
+
+const config = inject(rsConfigKey, null)
+
+const sonnerTheme = computed<'light' | 'dark'>(() => {
+  if (config?.theme.value) {
+    return config.theme.value === 'dark' ? 'dark' : 'light'
+  }
+  if (typeof document !== 'undefined') {
+    const mode = document.documentElement.dataset.rsTheme
+    if (mode === 'dark' || mode === 'light') return mode
+  }
+  return 'dark'
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Toaster
+      :theme="sonnerTheme"
+      :position="position"
+      :close-button="closeButton"
+      :expand="expand"
+      :gap="gap"
+      close-button-position="top-right"
+      :rich-colors="richColors"
+      class="rs-toaster"
+      :toast-options="{
+        unstyled: true,
+        classes: {
+          toast: 'rs-toast',
+          title: 'rs-toast__title',
+          description: 'rs-toast__description',
+          closeButton: 'rs-toast__close',
+          actionButton: 'rs-toast__action',
+          cancelButton: 'rs-toast__action rs-toast__action--secondary',
+        },
+      }"
+    />
+  </Teleport>
+</template>
+
+<style>
+[data-sonner-toaster].rs-toaster {
+  --rs-toast-radius: 1rem;
+  --rs-toast-bg: color-mix(in srgb, var(--rs-surface-elevated) 86%, transparent);
+  --rs-toast-border: color-mix(in srgb, var(--rs-border) 72%, rgb(255 255 255 / 0.08));
+  --rs-toast-shadow:
+    0 16px 40px -20px rgb(0 0 0 / 0.3),
+    0 8px 18px -14px rgb(0 0 0 / 0.18),
+    0 0 0 0.5px rgb(255 255 255 / 0.08);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-info) 7%, transparent);
+  --rs-toast-highlight: rgb(255 255 255 / 0.08);
+  z-index: var(--rs-z-toast);
+  font-family: inherit;
+}
+
+[data-rs-theme='light'] [data-sonner-toaster].rs-toaster {
+  --rs-toast-bg: color-mix(in srgb, var(--rs-surface-elevated) 94%, rgb(255 255 255 / 0.8));
+  --rs-toast-border: color-mix(in srgb, var(--rs-border) 84%, rgb(255 255 255 / 0.9));
+  --rs-toast-shadow:
+    0 18px 42px -24px rgb(15 23 42 / 0.2),
+    0 8px 18px -14px rgb(15 23 42 / 0.12),
+    0 0 0 0.5px rgb(255 255 255 / 0.86);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-info) 4%, #ffffff);
+  --rs-toast-highlight: rgb(255 255 255 / 0.72);
+}
+
+[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast {
+  position: absolute;
+}
+
+[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-y-position='top'] {
+  top: 0;
+}
+
+[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-y-position='bottom'] {
+  top: auto;
+  bottom: 0;
+}
+
+[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-x-position='left'] {
+  left: 0;
+}
+
+[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-x-position='right'] {
+  right: 0;
+}
+
+[data-sonner-toaster].rs-toaster [data-sonner-toast].rs-toast[data-x-position='center'] {
+  left: 0;
+  right: 0;
+}
+
+.rs-toast {
+  --rs-toast-accent: color-mix(in srgb, var(--rs-info) 68%, transparent);
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  column-gap: 0.75rem;
+  row-gap: 0.25rem;
+  width: var(--width, auto);
+  min-width: 19rem;
+  max-width: min(29rem, calc(100vw - 1.5rem));
+  padding: 0.875rem 0.9375rem 0.9375rem;
+  border: 1px solid var(--rs-toast-border);
+  border-radius: var(--rs-toast-radius);
+  background:
+    linear-gradient(
+      180deg,
+      transparent 0.625rem,
+      var(--rs-toast-accent) 0.625rem calc(100% - 0.625rem),
+      transparent calc(100% - 0.625rem)
+    )
+    0.5rem 0 / 2px 100% no-repeat,
+    linear-gradient(180deg, var(--rs-toast-highlight), transparent 38%),
+    linear-gradient(135deg, var(--rs-toast-tint), transparent 34%),
+    var(--rs-toast-bg);
+  color: var(--rs-text);
+  box-shadow:
+    var(--rs-toast-shadow),
+    inset 0 1px 0 rgb(255 255 255 / 0.08);
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+  transition:
+    box-shadow var(--rs-transition-normal),
+    border-color var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+
+.rs-toast:hover {
+  box-shadow:
+    0 18px 42px -20px rgb(0 0 0 / 0.34),
+    0 10px 24px -16px rgb(0 0 0 / 0.22),
+    0 0 0 0.5px rgb(255 255 255 / 0.1),
+    inset 0 1px 0 rgb(255 255 255 / 0.08);
+}
+
+.rs-toast[data-styled='true'] {
+  gap: 0;
+}
+
+.rs-toast [data-icon] {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  grid-row: 1 / span 2;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin-top: 0.125rem;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--rs-info);
+  box-shadow: none;
+}
+
+.rs-toast [data-content] {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 0.1875rem;
+  min-width: 0;
+  padding-right: 1.5rem;
+}
+
+.rs-toast [data-button] {
+  position: relative;
+  z-index: 1;
+  margin-top: 0.625rem;
+}
+
+.rs-toast__title {
+  margin: 0;
+  color: var(--rs-text);
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.012em;
+}
+
+.rs-toast__description {
+  margin: 0;
+  color: color-mix(in srgb, var(--rs-muted) 94%, var(--rs-text) 6%);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+
+.rs-toast [data-close-button].rs-toast__close {
+  position: absolute;
+  inset: 0.75rem 0.75rem auto auto;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--rs-muted);
+  box-shadow: none;
+  cursor: pointer;
+  transform: none;
+  opacity: 0.72;
+  transition:
+    opacity var(--rs-transition-fast),
+    color var(--rs-transition-fast),
+    border-color var(--rs-transition-fast),
+    background var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast);
+}
+
+.rs-toast [data-close-button].rs-toast__close svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+}
+
+.rs-toast [data-close-button].rs-toast__close:hover {
+  opacity: 0.96;
+  color: var(--rs-text);
+  border-color: color-mix(in srgb, var(--rs-border) 68%, transparent);
+  background: color-mix(in srgb, var(--rs-surface-hover) 70%, transparent);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.08),
+    0 1px 4px rgb(0 0 0 / 0.08);
+}
+
+.rs-toast [data-close-button].rs-toast__close:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.08),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+.rs-toast__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 4.5rem;
+  min-height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rs-primary) 92%, white 8%);
+  color: var(--rs-primary-foreground);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.01em;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.16),
+    0 1px 2px rgb(0 0 0 / 0.08);
+  cursor: pointer;
+  transition:
+    transform var(--rs-transition-fast),
+    background var(--rs-transition-fast),
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    color var(--rs-transition-fast);
+}
+
+.rs-toast__action:hover {
+  transform: translateY(-0.5px);
+  background: color-mix(in srgb, var(--rs-primary-hover) 94%, white 6%);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.18),
+    0 4px 10px rgb(0 0 0 / 0.12);
+}
+
+.rs-toast__action:active {
+  transform: translateY(0);
+  box-shadow:
+    inset 0 1px 1px rgb(0 0 0 / 0.08),
+    0 1px 3px rgb(0 0 0 / 0.08);
+}
+
+.rs-toast__action:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.18),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+.rs-toast__action--secondary {
+  border-color: color-mix(in srgb, var(--rs-border) 72%, transparent);
+  background: color-mix(in srgb, var(--rs-surface) 82%, transparent);
+  color: var(--rs-text);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.08),
+    0 1px 2px rgb(0 0 0 / 0.04);
+}
+
+.rs-toast__action--secondary:hover {
+  background: color-mix(in srgb, var(--rs-surface-hover) 82%, transparent);
+  border-color: color-mix(in srgb, var(--rs-border) 88%, transparent);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.1),
+    0 3px 8px rgb(0 0 0 / 0.08);
+}
+
+.rs-toast[data-type='success'] {
+  --rs-toast-accent: color-mix(in srgb, var(--rs-success) 68%, transparent);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-success) 7%, transparent);
+}
+
+.rs-toast[data-type='success'] [data-icon] {
+  color: var(--rs-success);
+}
+
+.rs-toast[data-type='error'] {
+  --rs-toast-accent: color-mix(in srgb, var(--rs-danger) 68%, transparent);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-danger) 7%, transparent);
+}
+
+.rs-toast[data-type='error'] [data-icon] {
+  color: var(--rs-danger);
+}
+
+.rs-toast[data-type='warning'] {
+  --rs-toast-accent: color-mix(in srgb, var(--rs-warning) 72%, transparent);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-warning) 8%, transparent);
+}
+
+.rs-toast[data-type='warning'] [data-icon] {
+  color: var(--rs-warning);
+}
+
+.rs-toast[data-type='info'],
+.rs-toast[data-type='default'] {
+  --rs-toast-accent: color-mix(in srgb, var(--rs-info) 68%, transparent);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-info) 7%, transparent);
+}
+
+.rs-toast[data-type='loading'] {
+  --rs-toast-accent: color-mix(in srgb, var(--rs-primary) 68%, transparent);
+  --rs-toast-tint: color-mix(in srgb, var(--rs-primary) 7%, transparent);
+}
+
+.rs-toast[data-type='loading'] [data-icon] {
+  color: var(--rs-primary);
+}
+
+@media (max-width: 640px) {
+  .rs-toast {
+    min-width: min(100%, 18.5rem);
+    max-width: calc(100vw - 1rem);
+    padding: 0.8125rem 0.875rem 0.875rem;
+    border-radius: 0.9375rem;
+  }
+
+  .rs-toast [data-close-button].rs-toast__close {
+    inset: 0.625rem 0.625rem auto auto;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .rs-toast__action {
+    min-height: 1.875rem;
+    padding: 0 0.6875rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rs-toast,
+  .rs-toast__action {
+    transition: none;
+  }
+}
+</style>