@globalbrain/sefirot 2.49.0 → 3.1.0

package/lib/components/SActionList.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import SActionListItem, { type ActionListItem } from './SActionListItem.vue'
+
+export type ActionList = ActionListItem[]
+export type { ActionListItem }
+
+defineProps<{
+  list: ActionList
+}>()
+</script>
+
+<template>
+  <div class="SActionList">
+    <SActionListItem
+      v-for="item, index in list"
+      :key="index"
+      :lead-icon="item.leadIcon"
+      :text="item.text"
+      :link="item.link"
+      :on-click="item.onClick"
+    />
+  </div>
+</template>

package/lib/components/SActionListItem.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import SIcon from './SIcon.vue'
+import SLink from './SLink.vue'
+
+export interface ActionListItem {
+  leadIcon?: IconifyIcon
+  text: string
+  link?: string
+  onClick?(): void
+}
+
+defineProps<ActionListItem>()
+</script>
+
+<template>
+  <component
+    :is="link ? SLink : 'button'"
+    class="SActionList"
+    :href="link"
+    @click="() => onClick?.()"
+  >
+    <span v-if="leadIcon" class="lead-icon">
+      <SIcon class="lead-icon-svg" :icon="leadIcon" />
+    </span>
+    <span class="text">{{ text }}</span>
+  </component>
+</template>
+
+<style scoped lang="postcss">
+.SActionList {
+  display: flex;
+  gap: 8px;
+  border-radius: 6px;
+  padding: 4px 8px;
+  width: 100%;
+  text-align: left;
+  line-height: 24px;
+  font-size: 14px;
+  transition: background-color 0.25s;
+
+  &:hover {
+    background-color: var(--c-bg-mute-1);
+  }
+
+  &:active {
+    background-color: var(--c-bg-mute-2);
+    transition: background-color 0.1s;
+  }
+}
+
+.lead-icon {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  flex-shrink: 0;
+  color: var(--c-text-2);
+}
+
+.lead-icon-svg {
+  width: 16px;
+  height: 16px;
+}
+</style>

package/lib/components/SAvatar.vue

@@ -65,7 +65,7 @@ const initial = computed(() => props.name?.charAt(0).toUpperCase())
 }
 
 .SAvatar.no-image {
-  border: 1px solid var(--c-divider-2);
+  border: 1px solid var(--c-border-mute-1);
 }
 
 .img {