niuma-ui 1.0.0

package/src/components/RsSidebar.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+export type RsSidebarOrientation = 'vertical' | 'horizontal'
+export type RsSidebarPlacement = 'left' | 'right'
+
+const collapsed = defineModel<boolean>('collapsed', { default: false })
+
+withDefaults(
+  defineProps<{
+    title?: string
+    subtitle?: string
+    collapsible?: boolean
+    width?: 'sm' | 'md' | 'lg'
+    orientation?: RsSidebarOrientation
+    placement?: RsSidebarPlacement
+  }>(),
+  {
+    collapsible: false,
+    width: 'md',
+    orientation: 'vertical',
+    placement: 'left',
+  },
+)
+</script>
+
+<template>
+  <aside
+    class="rs-sidebar"
+    :class="[
+      `rs-sidebar--${width}`,
+      `rs-sidebar--${orientation}`,
+      `rs-sidebar--${placement}`,
+      { 'rs-sidebar--collapsed': collapsed },
+    ]"
+  >
+    <header v-if="title || subtitle || collapsible || $slots.header" class="rs-sidebar__header">
+      <slot name="header">
+        <div class="rs-sidebar__title-wrap">
+          <strong v-if="title" class="rs-sidebar__title">{{ title }}</strong>
+          <span v-if="subtitle && !collapsed" class="rs-sidebar__subtitle">{{ subtitle }}</span>
+        </div>
+        <button
+          v-if="collapsible"
+          type="button"
+          class="rs-sidebar__collapse"
+          @click="collapsed = !collapsed"
+        >
+          {{ collapsed ? '>' : '<' }}
+        </button>
+      </slot>
+    </header>
+    <div class="rs-sidebar__body">
+      <slot :collapsed="collapsed" />
+    </div>
+    <footer v-if="$slots.footer" class="rs-sidebar__footer">
+      <slot name="footer" :collapsed="collapsed" />
+    </footer>
+  </aside>
+</template>
+
+<style scoped>
+.rs-sidebar {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid var(--rs-border-subtle);
+  background: color-mix(in srgb, var(--rs-surface) 88%, transparent);
+  color: var(--rs-text);
+}
+.rs-sidebar--sm {
+  width: 14rem;
+}
+.rs-sidebar--md {
+  width: 17rem;
+}
+.rs-sidebar--lg {
+  width: 21rem;
+}
+.rs-sidebar--collapsed {
+  width: 4rem;
+}
+.rs-sidebar__header,
+.rs-sidebar__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--rs-space-sm);
+  padding: var(--rs-space-md);
+  border-bottom: 1px solid var(--rs-border-subtle);
+}
+.rs-sidebar__footer {
+  border-top: 1px solid var(--rs-border-subtle);
+  border-bottom: 0;
+}
+.rs-sidebar__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--rs-space-sm);
+}
+.rs-sidebar__title-wrap {
+  min-width: 0;
+}
+.rs-sidebar__title,
+.rs-sidebar__subtitle {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-sidebar__subtitle {
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-sidebar__collapse {
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-surface);
+  color: var(--rs-muted);
+  cursor: pointer;
+}
+</style>

package/src/components/RsSidebarGroup.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  collapsed?: boolean
+}>()
+</script>
+
+<template>
+  <section class="rs-sidebar-group">
+    <div v-if="title && !collapsed" class="rs-sidebar-group__title">{{ title }}</div>
+    <div class="rs-sidebar-group__body">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.rs-sidebar-group + .rs-sidebar-group {
+  margin-top: var(--rs-space-md);
+}
+.rs-sidebar-group__title {
+  padding: var(--rs-space-xs) var(--rs-space-sm);
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+.rs-sidebar-group__body {
+  display: grid;
+  gap: var(--rs-space-xs);
+}
+</style>

package/src/components/RsSidebarItem.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import RsIcon from './RsIcon.vue'
+
+defineProps<{
+  label: string
+  icon?: string
+  active?: boolean
+  disabled?: boolean
+  collapsed?: boolean
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="rs-sidebar-item"
+    :class="{ 'rs-sidebar-item--active': active, 'rs-sidebar-item--collapsed': collapsed }"
+    :disabled="disabled"
+    :title="collapsed ? label : undefined"
+  >
+    <RsIcon v-if="icon" :name="icon" class="rs-sidebar-item__icon" />
+    <span v-if="!collapsed" class="rs-sidebar-item__label">{{ label }}</span>
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.rs-sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  width: 100%;
+  min-height: var(--rs-control-height-md);
+  box-sizing: border-box;
+  padding: 0 var(--rs-space-sm);
+  border: 1px solid transparent;
+  border-radius: var(--rs-radius-sm);
+  background: transparent;
+  color: var(--rs-muted);
+  font: inherit;
+  cursor: pointer;
+  transition:
+    background var(--rs-transition-fast),
+    border-color var(--rs-transition-fast),
+    color var(--rs-transition-fast);
+}
+.rs-sidebar-item:hover:not(:disabled) {
+  background: var(--rs-item-hover);
+  color: var(--rs-text);
+}
+.rs-sidebar-item--active {
+  background: color-mix(in srgb, var(--rs-primary) 12%, transparent);
+  color: var(--rs-primary);
+}
+.rs-sidebar-item--collapsed {
+  justify-content: center;
+  padding: 0;
+}
+.rs-sidebar-item:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+.rs-sidebar-item__icon {
+  flex: 0 0 auto;
+}
+.rs-sidebar-item__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>