@globalbrain/sefirot 2.0.0-draft.8 → 2.1.0

package/lib/components/SInputDropdown.vue

@@ -1,146 +1,101 @@
-<template>
-  <SInputBase
-    class="SInputDropdown"
-    :class="classes"
-    :label="label"
-    :note="note"
-    :help="help"
-    :validation="validation"
-  >
-    <div ref="container" class="SInputDropdown-container">
-      <div
-        class="SInputDropdown-box"
-        role="button"
-        tabindex="0"
-        @click="handleOpen"
-        @keydown.down.prevent
-        @keyup.enter="handleOpen"
-        @keyup.down="handleOpen"
-      >
-        <div class="SInputDropdown-box-content">
-          <SInputDropdownItem
-            v-if="hasSelected"
-            :item="selected"
-            :disabled="disabled"
-            @remove="handleCallback"
-          />
-
-          <span v-else class="SInputDropdown-box-placeholder">{{ placeholder }}</span>
-        </div>
-
-        <div class="SInputDropdown-box-icon">
-          <SIconChevronUp class="SInputDropdown-box-icon-svg up" />
-          <SIconChevronDown class="SInputDropdown-box-icon-svg down" />
-        </div>
-      </div>
-
-      <div v-if="isOpen" class="SInputDropdown-dropdown">
-        <SDropdown :options="dropdownOptions" @close="close" />
-      </div>
-    </div>
-  </SInputBase>
-</template>
-
 <script setup lang="ts">
-import { PropType, computed, nextTick } from 'vue'
-import { isNullish, isArray, isEqual } from '../support/Utils'
+import IconCaretDown from '@iconify-icons/ph/caret-down'
+import IconCaretUp from '@iconify-icons/ph/caret-up'
+import xor from 'lodash-es/xor'
+import { computed } from 'vue'
+import type { DropdownSectionFilter } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
-import { Search, Item, UseDropdownSearchOptions, useDropdown } from '../composables/Dropdown'
-import SIconChevronUp from './icons/SIconChevronUp.vue'
-import SIconChevronDown from './icons/SIconChevronDown.vue'
+import { Validatable } from '../composables/Validation'
+import { isArray } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
+import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
 
-type Size = 'mini' | 'small' | 'medium'
-type Value = string | number | boolean | unknown[]
-
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  label: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  placeholder: { type: String, default: null },
-  search: { type: [Boolean, Object] as PropType<boolean | Search>, default: false },
-  options: { type: Array as PropType<Item[]>, required: true },
-  nullable: { type: Boolean, default: true },
-  closeOnClick: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  modelValue: { type: [String, Number, Boolean, Array, Object] as PropType<Value>, default: null },
-  validation: { type: Object as PropType<any>, default: null }
-})
+export type Size = 'mini' | 'small' | 'medium'
+export type PrimitiveValue = string | number | boolean | null
+export type ArrayValue = (string | number | boolean)[]
+export type OptionValue = string | number | boolean
+
+export type Option = OptionText | OptionAvatar
 
-const emit = defineEmits(['update:modelValue'])
+export interface OptionBase {
+  type?: 'text' | 'avatar'
+  value: OptionValue
+}
 
-const { container, isOpen, open, close } = useFlyout()
+export interface OptionText extends OptionBase {
+  type?: 'text'
+  label: string
+}
+
+export interface OptionAvatar extends OptionBase {
+  type: 'avatar'
+  label: string
+  image?: string | null
+}
+
+const props = defineProps<{
+  size?: Size
+  label?: string
+  note?: string
+  help?: string
+  placeholder?: string
+  noSearch?: boolean
+  nullable?: boolean
+  closeOnClick?: boolean
+  options: Option[]
+  disabled?: boolean
+  modelValue: PrimitiveValue | ArrayValue
+  validation?: Validatable
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: PrimitiveValue | ArrayValue): void
+}>()
+
+const { container, isOpen, open } = useFlyout()
 
 const classes = computed(() => [
-  props.size,
+  props.size ?? 'small',
   { disabled: props.disabled }
 ])
 
-const enabledItems = computed(() => {
-  return props.options.filter(option => !option.disabled)
-})
-
-const dropdownOptions = useDropdown({
-  search: createDropdownSearchOptions(),
-  items: enabledItems,
-  closeOnClick: props.closeOnClick,
-  selected: computed(() => props.modelValue),
-  callback: handleCallback
-})
+const dropdownOptions = computed<DropdownSectionFilter[]>(() => [{
+  type: 'filter',
+  search: props.noSearch === undefined ? true : !props.noSearch,
+  selected: props.modelValue,
+  options: props.options,
+  onClick: handleSelect
+}])
 
 const selected = computed(() => {
-  return isArray(props.modelValue)
-    ? props.options.filter(o => (props.modelValue as unknown[]).includes(o.value))
-    : props.options.find(o => isEqual(o.value, props.modelValue))
-})
-
-const hasSelected = computed(() => {
-  return isArray(selected.value)
-    ? selected.value.length > 0
-    : !isNullish(selected.value) && selected.value.value !== ''
-})
-
-function createDropdownSearchOptions(): UseDropdownSearchOptions | undefined {
-  if (props.search === false) {
-    return undefined
-  }
-
-  if (props.search === true) {
-    return {
-      placeholder: 'Search items',
-      missing: 'No items found.'
-    }
+  if (isArray(props.modelValue)) {
+    return props.options.filter((o) => (props.modelValue as ArrayValue).includes(o.value))
   }
 
-  return props.search
-}
-
-async function handleOpen(): Promise<void> {
-  if (!props.disabled) {
-    open()
+  const item = props.options.find((o) => o.value === props.modelValue)
 
-    await nextTick()
+  return item ? [item] : []
+})
 
-    const el = document.querySelector<HTMLInputElement>('.SInputDropdown .SDropdown .search .SInputText input')
+const hasSelected = computed(() => {
+  return selected.value.length > 0
+})
 
-    el && el.focus()
-  }
+async function handleOpen() {
+  !props.disabled && open()
 }
 
-function handleCallback(item: Item): void {
-  props.validation && props.validation.$touch()
+function handleSelect(value: OptionValue) {
+  props.validation?.$touch()
 
-  isArray(props.modelValue) ? handleArray(item.value) : handlePrimitive(item.value)
+  isArray(props.modelValue) ? handleArray(value) : handlePrimitive(value)
 }
 
-function handlePrimitive(value: unknown): void {
-  if (!isEqual(props.modelValue, value)) {
-    emit('update:modelValue', value)
-
-    return
+function handlePrimitive(value: OptionValue) {
+  if (value !== props.modelValue) {
+    return emit('update:modelValue', value)
   }
 
   if (props.nullable) {
@@ -148,8 +103,8 @@ function handlePrimitive(value: unknown): void {
   }
 }
 
-function handleArray(value: unknown[]): void {
-  const difference = getDifference(props.modelValue as unknown[], value)
+function handleArray(value: OptionValue) {
+  const difference = xor(props.modelValue as ArrayValue, [value])
 
   if (!props.nullable && difference.length === 0) {
     return
@@ -157,76 +112,113 @@ function handleArray(value: unknown[]): void {
 
   emit('update:modelValue', difference)
 }
-
-function getDifference(source: unknown[], value: unknown[]): unknown[] {
-  return source
-    .filter(item => !isEqual(item, value))
-    .concat(source.includes(value) ? [] : [value])
-}
 </script>
 
+<template>
+  <SInputBase
+    class="SInputDropdown"
+    :class="classes"
+    :label="label"
+    :note="note"
+    :help="help"
+    :validation="validation"
+  >
+    <div class="container" ref="container">
+      <div
+        class="box"
+        role="button"
+        tabindex="0"
+        @click="handleOpen"
+        @keydown.down.prevent
+        @keyup.enter="handleOpen"
+        @keyup.down="handleOpen"
+      >
+        <div class="box-content">
+          <SInputDropdownItem
+            v-if="hasSelected"
+            :items="selected"
+            :disabled="disabled ?? false"
+            @remove="handleSelect"
+          />
+
+          <div v-else class="box-placeholder">{{ placeholder }}</div>
+        </div>
+
+        <div class="box-icon">
+          <SIcon :icon="IconCaretUp" class="box-icon-svg up" />
+          <SIcon :icon="IconCaretDown" class="box-icon-svg down" />
+        </div>
+      </div>
+
+      <div v-if="isOpen" class="dropdown">
+        <SDropdown :sections="dropdownOptions" />
+      </div>
+    </div>
+  </SInputBase>
+</template>
+
 <style lang="postcss" scoped>
 .SInputDropdown.mini {
-  .SInputDropdown-box {
+  .box {
     min-height: 32px;
   }
 
-  .SInputDropdown-box-content {
+  .box-content {
     padding: 3px 30px 3px 12px;
     line-height: 24px;
     font-size: 14px;
   }
 
-  .SInputDropdown-box-icon {
+  .box-icon {
     top: 3px;
     right: 8px;
   }
 }
 
 .SInputDropdown.small {
-  .SInputDropdown-box {
+  .box {
     min-height: 40px;
   }
 
-  .SInputDropdown-box-content {
-    padding: 7px 30px 7px 12px;
+  .box-content {
+    padding: 5px 30px 5px 8px;
     line-height: 24px;
-    font-size: 14px;
+    font-size: 16px;
   }
 
-  .SInputDropdown-box-icon {
+  .box-icon {
     top: 7px;
     right: 8px;
   }
 }
 
 .SInputDropdown.medium {
-  .SInputDropdown-box {
+  .box {
     height: 48px;
   }
 
-  .SInputDropdown-box-content {
+  .box-content {
     padding: 11px 44px 11px 16px;
     line-height: 24px;
     font-size: 16px;
   }
 
-  .SInputDropdown-box-icon {
+  .box-icon {
     top: 11px;
     right: 12px;
   }
 }
 
 .SInputDropdown.disabled {
-  .SInputDropdown-box {
-    background-color: var(--input-disabled-bg);
+  .box {
+    background-color: var(--c-bg);
     cursor: not-allowed;
 
-    &:hover                     { border-color: var(--input-outlined-border); }
-    &:focus:not(:focus-visible) { border-color: var(--input-outlined-border); }
+    &:hover                     { border-color: var(--c-divider); }
+    &:focus:not(:focus-visible) { border-color: var(--c-divider); }
   }
 
-  .SInputDropdown-box-icon {
+  .box-icon {
     cursor: not-allowed;
   }
 }
@@ -237,53 +229,63 @@ function getDifference(source: unknown[], value: unknown[]): unknown[] {
   }
 }
 
-.SInputDropdown-container {
+.container {
   position: relative;
 }
 
-.SInputDropdown-box {
+.box {
   position: relative;
-  border: 1px solid var(--input-border);
-  border-radius: 4px;
+  border: 1px solid var(--c-divider);
+  border-radius: 6px;
   width: 100%;
   color: var(--input-text);
+  background-color: var(--c-bg);
   cursor: pointer;
   transition: border-color .25s, background-color .25s;
 
   &:hover {
-    border-color: var(--input-focus-border);
+    border-color: var(--c-black);
   }
 
-  &:focus {
-    border-color: var(--input-focus-border);
-    outline: 0;
+  &:focus,
+  &:hover.focus {
+    border-color: var(--c-info);
   }
 
+  .dark &:hover {
+    border-color: var(--c-gray);
+  }
+
+  .dark &:focus,
+  .dark &:hover:focus {
+    border-color: var(--c-info);
+  }
 }
 
-.SInputDropdown-box-placeholder {
+.box-placeholder {
+  padding: 2px 4px;
   font-weight: 500;
-  color: var(--input-placeholder);
+  color: var(--c-text-3);
 }
 
-.SInputDropdown-box-icon {
+.box-icon {
   position: absolute;
   z-index: 10;
   cursor: pointer;
 }
 
-.SInputDropdown-box-icon-svg {
+.box-icon-svg {
   display: block;
   width: 14px;
   height: 14px;
-  fill: var(--input-placeholder);
+  color: var(--c-text-2);
 }
 
-.SInputDropdown-box-icon-svg.up {
+.box-icon-svg.up {
   margin-bottom: -4px;
 }
 
-.SInputDropdown-dropdown {
+.dropdown {
   position: absolute;
   top: calc(100% + 8px);
   left: 0;

package/lib/components/SInputDropdownItem.vue

@@ -1,63 +1,61 @@
-<template>
-  <div class="SInputDropdownItem">
-    <div v-for="(i, index) in arrayItem" :key="index" class="item">
-      <component
-        :is="component(i)"
-        :mute="shouldMute(i)"
-        :item="i"
-        :disabled="disabled"
-        @remove="$emit('remove', i)"
-      />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { PropType, computed } from 'vue'
-import { isArray } from '../support/Utils'
+import SInputDropdownItemAvatar from './SInputDropdownItemAvatar.vue'
 import SInputDropdownItemText from './SInputDropdownItemText.vue'
-import SInputDropdownItemTextTag from './SInputDropdownItemTextTag.vue'
-import SInputDropdownItemUser from './SInputDropdownItemUser.vue'
-import SInputDropdownItemUserTag from './SInputDropdownItemUserTag.vue'
-
-const props = defineProps({
-  item: { type: [Object, Array] as PropType<any>, default: null },
-  disabled: { type: Boolean, default: false }
-})
-
-defineEmits(['remove'])
-
-const isItemArray = computed(() => isArray(props.item))
 
-const arrayItem = computed(() => {
-  return isArray(props.item) ? props.item : [props.item]
-})
+export type Item = ItemText | ItemAvatar
 
-function component(item: any): any {
-  if (item.type === 'text') {
-    return isItemArray.value ? SInputDropdownItemTextTag : SInputDropdownItemText
-  }
-
-  if (item.type === 'user') {
-    return isItemArray.value ? SInputDropdownItemUserTag : SInputDropdownItemUser
-  }
+export interface ItemBase {
+  type?: 'text' | 'avatar'
+  value: string | number | boolean
+}
 
-  throw new Error('Invalid item type.')
+export interface ItemText extends ItemBase {
+  type?: 'text'
+  label: string
 }
 
-function shouldMute(item: any) {
-  return item.value === null
+export interface ItemAvatar extends ItemBase {
+  type: 'avatar'
+  label: string
+  image?: string | null
 }
+
+defineProps<{
+  items: Item[]
+  disabled: boolean
+}>()
+
+defineEmits<{
+  (e: 'remove', value: string | number | boolean): void
+}>()
 </script>
 
-<style lang="postcss" scoped>
+<template>
+  <div class="SInputDropdownItem">
+    <div v-for="(item, index) in items" :key="index" class="item">
+      <SInputDropdownItemText
+        v-if="item.type === 'text' || item.type === undefined"
+        :label="item.label"
+        :value="item.value"
+        :disabled="disabled"
+        @remove="(v) => $emit('remove', v)"
+      />
+      <SInputDropdownItemAvatar
+        v-if="item.type === 'avatar'"
+        :label="item.label"
+        :image="item.image"
+        :value="item.value"
+        :disabled="disabled"
+        @remove="(v) => $emit('remove', v)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="postcss">
 .SInputDropdownItem {
   display: flex;
   flex-wrap: wrap;
-  margin: -2px -8px;
-}
-
-.item {
-  padding: 2px;
+  gap: 4px;
 }
 </style>

package/lib/components/SInputDropdownItemAvatar.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import IconX from '@iconify-icons/ph/x'
+import SAvatar from './SAvatar.vue'
+import SIcon from './SIcon.vue'
+
+defineProps<{
+  label: string
+  image?: string | null
+  value: string | number | boolean
+  disabled: boolean
+}>()
+
+defineEmits<{
+  (e: 'remove', value: string | number | boolean): void
+}>()
+</script>
+
+<template>
+  <div class="SInputDropdownItemAvatar" :class="{ disabled }">
+    <div class="user">
+      <div class="avatar">
+        <SAvatar size="nano" :avatar="image" :name="label" />
+      </div>
+      <p class="name">{{ label }}</p>
+    </div>
+
+    <div v-if="!disabled" class="remove" role="button" @click="$emit('remove', value)">
+      <div class="remove-box">
+        <SIcon :icon="IconX" class="remove-icon" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.SInputDropdownItemAvatar {
+  display: flex;
+  border: 1px solid var(--c-divider-light);
+  border-radius: 14px;
+  padding: 0;
+  background-color: var(--c-bg-mute);
+}
+
+.SInputDropdownItemUserAvatar.disabled {
+  padding: 0 10px 0 0;
+  background-color: var(--c-gray-light-4);
+}
+
+.user {
+  display: flex;
+}
+
+.avatar {
+  padding: 3px 0 0 3px;
+}
+
+.name {
+  margin: 0 0 0 8px;
+  line-height: 26px;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.remove {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 2px;
+  width: 26px;
+  height: 26px;
+}
+
+.remove-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  color: var(--c-text-2);
+  transition: color 0.25s, background-color 0.25s;
+
+  .remove:hover & {
+    color: var(--c-text-1);
+    background-color: var(--c-gray-light-3)
+  }
+
+  .dark .remove:hover & {
+    color: var(--c-text-1);
+    background-color: var(--c-gray-dark-3)
+  }
+}
+
+.remove-icon {
+  width: 12px;
+  height: 12px;
+}
+</style>