@globalbrain/sefirot 2.0.0-draft.8 → 2.1.0

package/lib/components/SButtonGroup.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="SButtonGroup" :class="classes">
+    <button
+      v-for="item in items"
+      :key="item.value"
+      class="button"
+      :class="getButtonClasses(item)"
+      @click="handleClick(item.value)"
+    >
+      <span class="content">
+        {{ item.label }}
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+
+interface ButtonGroupItem {
+  label: string
+  value: string
+  mode: Mode
+}
+
+type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
+
+
+const props = defineProps({
+  items: { type: Array as PropType<ButtonGroupItem[]>, required: true },
+  size: { type: String as PropType<Size>, default: 'medium' },
+  modelValue: { type: String, default: null }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const classes = computed(() => [props.size])
+
+function getButtonClasses(button: ButtonGroupItem) {
+  return [
+    { active: button.value === props.modelValue },
+    button.mode ?? 'neutral'
+  ]
+}
+
+function handleClick(value: string) {
+  emit('update:modelValue', value)
+}
+</script>
+
+<style lang="postcss" scoped>
+.SButtonGroup {
+  display: flex;
+  width: fit-content;
+  border: 1px solid var(--c-divider);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.SButtonGroup.mini {
+  height: 28px;
+
+  .button {
+    padding: 0 8px;
+    height: 28px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+}
+
+.SButtonGroup.small {
+  height: 32px;
+
+  .button {
+    padding: 0 10px;
+    height: 32px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+}
+
+.SButtonGroup.medium {
+  height: 40px;
+
+  .button {
+    padding: 0 12px;
+    height: 40px;
+    font-size: 13px;
+    font-weight: 500;
+  }
+}
+
+.SButtonGroup.large {
+  height: 48px;
+
+  .button {
+    padding: 0 14px;
+    height: 48px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+.SButtonGroup.jumbo {
+  height: 64px;
+
+  .button {
+    padding: 0 24px;
+    height: 64px;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+.button {
+  border-left: 1px solid transparent;
+  letter-spacing: .4px;
+  color: var(--c-text-2);
+  white-space: nowrap;
+  transition: color .25s, background-color .25s;
+
+  &:hover {
+    color: var(--c-text-1);
+  }
+}
+
+.button:not(:first-child) {
+  border-left: 1px solid var(--c-divider);
+}
+
+.button.active {
+  color: var(--c-text-dark-1);
+}
+
+.button.neutral.active { background-color: var(--c-black); }
+.button.info.active    { background-color: var(--c-info); }
+.button.success.active { background-color: var(--c-success); }
+.button.warning.active { background-color: var(--c-warning); }
+.button.danger.active  { background-color: var(--c-danger); }
+
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+</style>

package/lib/components/SDropdown.vue

@@ -1,167 +1,43 @@
-<template>
-  <div class="SDropdown">
-    <div v-if="options.title" class="header">
-      <p class="title">{{ options.title }}</p>
-      <button class="close" @click="$emit('close')">
-        <SIconX class="close-icon" />
-      </button>
-    </div>
+<script setup lang="ts">
+import { DropdownSection } from '../composables/Dropdown'
+import SDropdownSection from './SDropdownSection.vue'
 
-    <div v-if="options.search" class="search">
-      <SInputText
-        size="mini"
-        mode="outlined"
-        :placeholder="options.search.placeholder"
-        :model-value="options.search.value.value"
-        @update:model-value="v => options.search?.onInput(v)"
-      />
-    </div>
+defineProps<{
+  sections: DropdownSection[]
+}>()
+</script>
 
+<template>
+  <div class="SDropdown">
     <div class="container">
-      <ul v-if="options.items.value.length > 0" class="list">
-        <li
-          v-for="(item, index) in options.items.value"
-          :key="index"
-          class="item"
-          tabindex="0"
-          @keydown.up.prevent
-          @keydown.down.prevent
-          @keyup.up.prevent="focusPrev"
-          @keyup.down.prevent="focusNext"
-          @keyup.enter="onClick(item)"
-          @keyup.escape="$emit('close')"
-          @click="onClick(item)"
-        >
-          <SDropdownItem :selected="options.selected" :item="item" />
-        </li>
-      </ul>
-
-      <p v-else class="item-missing">{{ options.search?.missing }}</p>
+      <div v-for="(section, index) in sections" :key="index" class="section">
+        <SDropdownSection :section="section" />
+      </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { Dropdown, Item } from '../composables/Dropdown'
-import SIconX from './icons/SIconX.vue'
-import SInputText from './SInputText.vue'
-import SDropdownItem from './SDropdownItem.vue'
-
-const props = defineProps({
-  round: { type: Number, default: 8 },
-  options: { type: Object as PropType<Dropdown>, required: true }
-})
-
-const emit = defineEmits(['close'])
-
-function focusFirstItem(): void {
-  const el = document.querySelector('.SDropdown .item:first-child') as HTMLElement | null
-  el?.focus?.()
-}
-
-function focusPrev(event: any): void {
-  event.target.previousSibling?.focus()
-}
-
-function focusNext(event: any): void {
-  event.target.nextSibling?.focus()
-}
-
-function onClick(item: Item): void {
-  if (item.callback) {
-    item.callback()
-  } else if (props.options.callback) {
-    props.options.callback(item)
-  }
-
-  if (props.options.closeOnClick) {
-    emit('close')
-  }
-}
-</script>
-
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .SDropdown {
-  display: inline-block;
-  overflow: hidden;
-  min-width: 192px;
   border: 1px solid var(--c-divider-light);
-  border-radius: 8px;
-  background-color: var(--c-white);
-  box-shadow: var(--shadow-depth-3);
-  transition: background-color .25s;
-}
-
-.dark .SDropdown {
-  background-color: var(--c-black-soft);
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--c-divider-light);
-  padding: 0 0 0 16px;
-}
-
-.title {
-  padding: 4px 0 3px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--c-text-2);
-}
-
-.close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 31px;
-  color: var(--c-text-2);
-
-  &:hover {
-    color: var(--c-text-1);
-  }
-}
-
-.close-icon {
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
-}
-
-.search {
-  padding: 8px 8px 7px;
-  border-bottom: 1px solid var(--c-divider-light);
-}
-
-.container {
-  max-height: 304px;
+  border-radius: 12px;
+  min-width: 256px;
+  max-height: 384px;
+  background-color: var(--c-bg);
   overflow-y: auto;
-}
 
-.item {
-  &:hover,
-  &:focus {
-    background-color: var(--dropdown-item-hover-bg);
-    outline: none;
+  &::-webkit-scrollbar {
+    display: none;
   }
-}
-
-.item:first-child {
-  padding-top: 1px;
-}
 
-.item + .item {
-  border-top: 1px solid var(--c-divider-light);
+  .dark & {
+    background-color: var(--c-bg-mute);
+  }
 }
 
-.item-missing {
-  margin: 0;
-  padding: 8px 16px;
-  line-height: 16px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--c-text-2);
+.section {
+  & + & {
+    border-top: 1px solid var(--c-divider-light);
+  }
 }
 </style>

package/lib/components/SDropdownSection.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { DropdownSection } from '../composables/Dropdown'
+import SDropdownSectionFilter from './SDropdownSectionFilter.vue'
+import SDropdownSectionMenu from './SDropdownSectionMenu.vue'
+
+defineProps<{
+  section: DropdownSection
+}>()
+</script>
+
+<template>
+  <SDropdownSectionMenu
+    v-if="section.type === 'menu'"
+    :options="section.options"
+  />
+  <SDropdownSectionFilter
+    v-else-if="section.type === 'filter'"
+    :search="section.search"
+    :selected="section.selected"
+    :options="section.options"
+    :on-click="section.onClick"
+  />
+</template>
+
+<style scoped lang="postcss">
+.SDropdown {
+  border: 1px solid var(--c-divider-light);
+  border-radius: 12px;
+  min-width: 256px;
+  max-height: 384px;
+  background-color: var(--c-bg);
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .dark & {
+    background-color: var(--c-bg-mute);
+  }
+}
+
+.section {
+  & + & {
+    border-top: 1px solid var(--c-divider-light);
+  }
+}
+</style>

package/lib/components/SDropdownSectionFilter.vue

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import IconCheck from '@iconify-icons/ph/check'
+import type { MaybeRef } from '@vueuse/core'
+import Fuse from 'fuse.js'
+import { ref, computed, unref, onMounted } from 'vue'
+import { DropdownSectionFilterSelectedValue, DropdownSectionFilterOption } from '../composables/Dropdown'
+import { isArray } from '../support/Utils'
+import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
+import SIcon from './SIcon.vue'
+
+const props = defineProps<{
+  search?: boolean
+  selected: MaybeRef<DropdownSectionFilterSelectedValue>
+  options: DropdownSectionFilterOption[]
+  onClick?(value: string | number | boolean): void
+}>()
+
+const input = ref<HTMLElement | null>(null)
+const query = ref('')
+
+const fuse = computed(() => {
+  return new Fuse(props.options, { keys: ['label'] })
+})
+
+const filteredOptions = computed(() => {
+  return !props.search || !query.value
+    ? props.options
+    : fuse.value.search(query.value).map((r) => r.item)
+})
+
+onMounted(() => {
+  input.value?.focus()
+})
+
+function isActive(value: string | number | boolean) {
+  const selected = unref(props.selected)
+
+  return isArray(selected)
+    ? selected.some((sv) => sv === value)
+    : selected === value
+}
+
+function focusPrev(event: any) {
+  event.target.parentNode.previousElementSibling?.firstElementChild?.focus()
+}
+
+function focusNext(event: any) {
+  event.target.parentNode.nextElementSibling?.firstElementChild?.focus()
+}
+
+function handleClick(option: DropdownSectionFilterOption, value: string | number | boolean) {
+  option.onClick && option.onClick(value)
+  props.onClick && props.onClick(value)
+}
+</script>
+
+<template>
+  <div class="SDropdownSectionFilter">
+    <div v-if="search" class="search">
+      <input class="input" placeholder="Filter options" ref="input" v-model="query">
+    </div>
+
+    <ul v-if="filteredOptions.length" class="list">
+      <li v-for="option in filteredOptions" :key="option.label" class="item">
+        <button
+          class="button"
+          :class="{ active: isActive(option.value) }"
+          tabindex="0"
+          @keyup.up.prevent="focusPrev"
+          @keyup.down.prevent="focusNext"
+          @click="handleClick(option, option.value)"
+        >
+          <span class="checkbox">
+            <span class="checkbox-box">
+              <SIcon :icon="IconCheck" class="checkbox-icon" />
+            </span>
+          </span>
+          <span class="option-item">
+            <SDropdownSectionFilterItem :option="option" />
+          </span>
+        </button>
+      </li>
+    </ul>
+
+    <p v-else class="empty">
+      No options found.
+    </p>
+  </div>
+</template>
+
+<style scoped lang="postcss">
+.search {
+  position: sticky;
+  top: 0;
+  border-bottom: 1px solid var(--c-divider-light);
+  padding: 8px;
+  background-color: var(--c-bg-elv-up);
+}
+
+.input {
+  border: 1px solid var(--c-divider);
+  border-radius: 6px;
+  padding: 0 8px;
+  width: 100%;
+  font-size: 12px;
+  line-height: 32px;
+  background-color: var(--c-bg);
+  transition: border-color 0.25s;
+
+  &::placeholder {
+    font-weight: 500;
+    color: var(--c-text-3);
+  }
+
+  &:hover { border-color: var(--c-black); }
+  &:focus { border-color: var(--c-info); }
+
+  .dark &:hover { border-color: var(--c-gray); }
+  .dark &:focus { border-color: var(--c-info); }
+}
+
+.list {
+  padding: 8px;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  padding: 0 8px;
+  width: 100%;
+  text-align: left;
+  transition: color 0.25s, background-color 0.25s;
+
+  &:hover,
+  &:focus {
+    background-color: var(--c-bg-mute);
+  }
+
+  .dark &:hover,
+  .dark &:focus {
+    background-color: var(--c-bg);
+  }
+}
+
+.checkbox {
+  display: block;
+}
+
+.checkbox-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--c-divider);
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+  background-color: var(--c-bg);
+  transition: border-color 0.1s, background-color 0.1s;
+
+  .button.active & {
+    border-color: var(--c-info);
+    background-color: var(--c-info);
+  }
+}
+
+.checkbox-icon {
+  display: block;
+  width: 10px;
+  height: 10px;
+  color: var(--c-white);
+  opacity: 0;
+  transition: opacity 0.25s;
+
+  .button.active & {
+    opacity: 1;
+  }
+}
+
+.empty {
+  padding: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--c-text-2);
+
+  .search + & {
+    border-top: 1px solid var(--c-divider-light);
+  }
+}
+</style>

package/lib/components/SDropdownSectionFilterItem.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { DropdownSectionFilterOption } from '../composables/Dropdown'
+import SDropdownSectionFilterItemAvatar from './SDropdownSectionFilterItemAvatar.vue'
+import SDropdownSectionFilterItemText from './SDropdownSectionFilterItemText.vue'
+
+defineProps<{
+  option: DropdownSectionFilterOption
+}>()
+</script>
+
+<template>
+  <SDropdownSectionFilterItemText
+    v-if="option.type === 'text' || option.type === undefined"
+    :label="option.label"
+  />
+  <SDropdownSectionFilterItemAvatar
+    v-else-if="option.type === 'avatar'"
+    :label="option.label"
+    :image="option.image"
+  />
+</template>

package/lib/components/SDropdownSectionFilterItemAvatar.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import SAvatar from './SAvatar.vue'
+
+defineProps<{
+  label: string
+  image?: string | null
+}>()
+</script>
+
+<template>
+  <span class="SDropdownSectionFilterItemAvatar">
+    <SAvatar size="nano" :avatar="image" :name="label" />
+    <span class="name">{{ label }}</span>
+  </span>
+</template>
+
+<style scoped lang="postcss">
+.SDropdownSectionFilterItemAvatar {
+  display: inline-flex;
+  align-items: center;
+  padding-left: 8px;
+  min-height: 32px;
+}
+
+.name {
+  display: inline-block;
+  padding-left: 8px;
+  font-size: 12px;
+  font-weight: 500;
+}
+</style>

package/lib/components/SDropdownSectionFilterItemText.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+}>()
+</script>
+
+<template>
+  <span class="SDropdownSectionFilterItemText">
+    {{ label }}
+  </span>
+</template>
+
+<style scoped lang="postcss">
+.SDropdownSectionFilterItemText {
+  padding-left: 8px;
+  line-height: 32px;
+  font-size: 12px;
+  font-weight: 500;
+}
+</style>

package/lib/components/SDropdownSectionMenu.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { DropdownSectionMenuOption } from '../composables/Dropdown'
+
+defineProps<{
+  options: DropdownSectionMenuOption[]
+}>()
+</script>
+
+<template>
+  <ul class="SDropdownSectionMenu">
+    <li v-for="option in options" :key="option.label" class="item">
+      <button class="button" @click="option.onClick">
+        {{ option.label }}
+      </button>
+    </li>
+  </ul>
+</template>
+
+<style scoped lang="postcss">
+.SDropdownSectionMenu {
+  padding: 8px;
+}
+
+.button {
+  display: block;
+  border-radius: 6px;
+  padding: 0 8px;
+  width: 100%;
+  text-align: left;
+  line-height: 32px;
+  font-size: 12px;
+  font-weight: 500;
+  transition: color 0.25s, background-color 0.25s;
+
+  &:hover {
+    background-color: var(--c-bg-elv-down);
+  }
+}
+</style>

package/lib/components/SIcon.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Icon, IconifyIcon } from '@iconify/vue/dist/offline'
+import type { DefineComponent } from 'vue'
+
+defineProps<{
+  icon: IconifyIcon | DefineComponent
+}>()
+</script>
+
+<template>
+  <Icon v-if="typeof icon['body'] === 'string'" :icon="(icon as IconifyIcon)" />
+  <component v-else :is="icon" />
+</template>