@globalbrain/sefirot 3.49.0 → 4.0.0-0

package/lib/components/SLoginPage.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import IconGoogle from '@iconify-icons/ri/google-fill'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { usePower } from '../composables/Power'
 import SButton from './SButton.vue'
 import SLink from './SLink.vue'
+import SLoginPagePasswordDialog from './SLoginPagePasswordDialog.vue'
+import SModal from './SModal.vue'
 import SIconGbLogoWhite from './icon/SIconGbLogoWhite.vue'
+import IconLockKey from '~icons/ph/lock-key-fill'
+import IconGoogle from '~icons/ri/google-fill'
 
 export interface CoverTitle {
   text: string
@@ -15,11 +19,20 @@ export interface CoverPhotographer {
   link: string
 }
 
-export interface Action {
+export type Action = ActionPassword | ActionSocial
+
+export interface ActionPassword {
+  type: 'password'
+  onSubmit(email: string, password: string): Promise<boolean>
+}
+
+export interface ActionSocial {
   type: 'google'
-  onClick: () => Promise<void>
+  onClick(): Promise<void>
 }
 
+export type ActionType = 'password' | 'google'
+
 const props = defineProps<{
   cover: string
   coverTitle: CoverTitle
@@ -27,23 +40,51 @@ const props = defineProps<{
   actions: Action[]
 }>()
 
+const passwordDialog = usePower()
+
+const selectedPasswordAction = ref<ActionPassword | null>(null)
+const actionInProgress = ref(false)
+const actionError = ref(false)
+
 const coverBgImageStyle = computed(() => `url(${props.cover})`)
 
-function getActionLabel(type: Action['type']) {
+function getActionLabel(type: ActionType) {
   switch (type) {
+    case 'password':
+      return 'Sign in via Password'
     case 'google':
       return 'Sign in via Google'
-    default:
-      throw new Error('[sefirot] Invalid action type')
   }
 }
 
-function getIconComponent(type: Action['type']) {
+function getIconComponent(type: ActionType) {
   switch (type) {
+    case 'password':
+      return IconLockKey
     case 'google':
       return IconGoogle
-    default:
-      throw new Error('[sefirot] Invalid action type')
+  }
+}
+
+function onAction(action: Action) {
+  switch (action.type) {
+    case 'password':
+      selectedPasswordAction.value = action
+      return passwordDialog.on()
+    case 'google':
+      return action.onClick()
+  }
+}
+
+async function onSubmit(email: string, password: string) {
+  actionInProgress.value = true
+
+  actionError.value = !(await selectedPasswordAction.value!.onSubmit(email, password))
+
+  actionInProgress.value = false
+
+  if (!actionError.value) {
+    passwordDialog.off()
   }
 }
 </script>
@@ -74,20 +115,30 @@ function getIconComponent(type: Action['type']) {
           <p class="form-lead">This is a very closed login form meant for specific audiences only. If you can’t login, well, you know who to ask.</p>
         </div>
 
-        <div class="form-actions">
-          <SButton
-            v-for="action in actions"
-            :key="action.type"
-            size="large"
-            mode="white"
-            rounded
-            :label="getActionLabel(action.type)"
-            :icon="getIconComponent(action.type)"
-            @click="action.onClick"
-          />
+        <div class="form-actions" :class="{ multi: actions.length > 1 }">
+          <div v-for="action in actions" :key="action.type" class="form-action">
+            <SButton
+              size="large"
+              mode="white"
+              block
+              rounded
+              :label="getActionLabel(action.type)"
+              :icon="getIconComponent(action.type)"
+              @click="onAction(action)"
+            />
+          </div>
         </div>
       </div>
     </div>
+
+    <SModal :open="passwordDialog.state.value" @close="passwordDialog.off">
+      <SLoginPagePasswordDialog
+        :loading="actionInProgress"
+        :error="actionError"
+        @cancel="passwordDialog.off"
+        @submit="onSubmit"
+      />
+    </SModal>
   </div>
 </template>
 
@@ -196,9 +247,15 @@ function getIconComponent(type: Action['type']) {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: 16px;
   padding-top: 24px;
   text-align: center;
   margin: 0 auto;
 }
+
+.form-actions.multi .form-action {
+  display: block;
+  width: 100%;
+  max-width: 256px;
+}
 </style>

package/lib/components/SLoginPagePasswordDialog.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { useData } from '../composables/Data'
+import { useValidation } from '../composables/Validation'
+import { email, maxLength, required } from '../validation/rules'
+import SAlert from './SAlert.vue'
+import SCard from './SCard.vue'
+import SCardBlock from './SCardBlock.vue'
+import SContent from './SContent.vue'
+import SControl from './SControl.vue'
+import SControlButton from './SControlButton.vue'
+import SControlRight from './SControlRight.vue'
+import SDoc from './SDoc.vue'
+import SInputText from './SInputText.vue'
+
+defineProps<{
+  loading: boolean
+  error: boolean
+}>()
+
+const emit = defineEmits<{
+  cancel: []
+  submit: [email: string, password: string]
+}>()
+
+const { data } = useData({
+  email: null as string | null,
+  password: null as string | null
+})
+
+const { validation, validateAndNotify } = useValidation(data, {
+  email: {
+    required: required(),
+    maxLength: maxLength(255),
+    email: email()
+  },
+  password: {
+    required: required(),
+    maxLength: maxLength(255)
+  }
+})
+
+async function onSubmit() {
+  if (await validateAndNotify()) {
+    emit('submit', data.value.email!, data.value.password!)
+  }
+}
+</script>
+
+<template>
+  <SCard size="small">
+    <SCardBlock class="s-p-24">
+      <SDoc>
+        <SContent>
+          <h2>Sign in to account</h2>
+        </SContent>
+        <SAlert v-if="error" mode="danger">
+          <p>Invalid email or password.</p>
+        </SAlert>
+        <SInputText
+          name="email"
+          type="email"
+          label="Email"
+          placeholder="john.doe@example.com"
+          v-model="data.email"
+          :validation="validation.email"
+        />
+        <SInputText
+          name="password"
+          type="password"
+          label="Password"
+          placeholder="Password"
+          v-model="data.password"
+          :validation="validation.password"
+        />
+      </SDoc>
+    </SCardBlock>
+    <SCardBlock size="xlarge" class="s-px-24">
+      <SControl>
+        <SControlRight>
+          <SControlButton
+            label="Cancel"
+            :disabled="loading"
+            @click="$emit('cancel')"
+          />
+          <SControlButton
+            mode="info"
+            label="Sign in"
+            :loading="loading"
+            @click="onSubmit"
+          />
+        </SControlRight>
+      </SControl>
+    </SCardBlock>
+  </SCard>
+</template>

package/lib/components/SPagination.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import IconCaretLeft from '@iconify-icons/ph/caret-left-bold'
-import IconCaretRight from '@iconify-icons/ph/caret-right-bold'
 import { computed } from 'vue'
 import { useTrans } from '../composables/Lang'
 import { format } from '../support/Num'
 import SButton from './SButton.vue'
+import IconCaretLeft from '~icons/ph/caret-left-bold'
+import IconCaretRight from '~icons/ph/caret-right-bold'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Align = 'left' | 'center' | 'right'

package/lib/components/SPill.vue

@@ -12,9 +12,6 @@ const props = defineProps<{
   mode?: Mode
   label?: string
   clickable?: boolean
-
-  // @deprecated Use `as` instead.
-  tag?: string
 }>()
 
 const emit = defineEmits<{
@@ -29,8 +26,7 @@ const classes = computed(() => [
 ])
 
 const computedTag = computed(() => {
-  const as = props.as ?? props.tag
-  return as || (props.clickable ? 'button' : 'span')
+  return props.as || (props.clickable ? 'button' : 'span')
 })
 
 function onClick() {

package/lib/components/SSnackbar.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import IconX from '@iconify-icons/ph/x'
 import { type SnackbarAction, useSnackbars } from '../stores/Snackbars'
 import SButton from './SButton.vue'
-import SIcon from './SIcon.vue'
+import IconX from '~icons/ph/x'
 
 const props = defineProps<{
   id: number
@@ -21,7 +20,7 @@ function close() {
 <template>
   <div class="SSnackbar" :class="[mode ?? 'neutral']">
     <button class="close" @click="close">
-      <SIcon :icon="IconX" class="close-icon" />
+      <IconX class="close-icon" />
     </button>
 
     <p class="content">

package/lib/components/SStep.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import IconCheck from '@iconify-icons/ph/check'
-import IconX from '@iconify-icons/ph/x'
 import { type PropType } from 'vue'
 import { type BarMode, type StepStatus } from '../composables/Step'
-import SIcon from './SIcon.vue'
+import IconCheck from '~icons/ph/check'
+import IconX from '~icons/ph/x'
 
 defineProps({
   status: { type: String as PropType<StepStatus>, required: true },
@@ -19,8 +18,8 @@ defineProps({
       <div class="bar" :class="[barLeft]" />
       <div class="point">
         <div v-if="status === 'active'" class="inner-dot" />
-        <SIcon v-else-if="status === 'done'" :icon="IconCheck" class="icon" />
-        <SIcon v-else-if="status === 'failed'" :icon="IconX" class="icon" />
+        <IconCheck v-else-if="status === 'done'" class="icon" />
+        <IconX v-else-if="status === 'failed'" class="icon" />
       </div>
       <div class="bar" :class="[barRight]" />
     </div>

package/lib/components/STable.vue

@@ -98,7 +98,7 @@ const showFooter = computed(() => {
     return footer
   }
 
-  return (
+  return !!(
     unref(props.options.page)
     && unref(props.options.perPage)
     && unref(props.options.total)
@@ -363,7 +363,6 @@ function updateSelected(selected: any) {
         :total="unref(options.total)"
         :reset="unref(options.reset)"
         :menu="unref(options.menu)"
-        :actions="unref(options.actions)"
         :borderless="unref(options.borderless)"
         :on-reset="options.onReset"
         :selected="Array.isArray(selected) ? selected : undefined"

package/lib/components/STableCell.vue

@@ -37,7 +37,7 @@ const computedCell = computed<TableCell | undefined>(() =>
       :record="record"
       :align="computedCell?.align"
       :icon="computedCell?.icon"
-      :getter="computedCell?.value"
+      :text="computedCell?.value"
       :link="computedCell?.link"
       :color="computedCell?.color"
       :icon-color="computedCell?.iconColor"
@@ -49,7 +49,7 @@ const computedCell = computed<TableCell | undefined>(() =>
       :record="record"
       :align="computedCell.align"
       :icon="computedCell.icon"
-      :getter="computedCell.value"
+      :number="computedCell.value"
       :separator="computedCell.separator"
       :link="computedCell.link"
       :color="computedCell.color"
@@ -58,29 +58,23 @@ const computedCell = computed<TableCell | undefined>(() =>
     />
     <STableCellDay
       v-else-if="computedCell.type === 'day'"
-      :value="value"
-      :record="record"
       :align="computedCell.align"
-      :getter="computedCell.value"
+      :day="computedCell.value"
       :format="computedCell.format"
       :color="computedCell.color"
     />
     <STableCellPill
       v-else-if="computedCell.type === 'pill'"
-      :value="value"
-      :record="record"
-      :getter="computedCell.value"
+      :pill="computedCell.value"
       :color="computedCell.color"
     />
     <STableCellPills
       v-else-if="computedCell.type === 'pills'"
-      :value="value"
-      :record="record"
       :pills="computedCell.pills"
     />
     <STableCellState
       v-else-if="computedCell.type === 'state'"
-      :value="computedCell.label"
+      :state="computedCell.label"
       :mode="computedCell.mode"
     />
     <STableCellAvatar
@@ -95,8 +89,6 @@ const computedCell = computed<TableCell | undefined>(() =>
     />
     <STableCellAvatars
       v-else-if="computedCell.type === 'avatars'"
-      :value="value"
-      :record="record"
       :avatars="computedCell.avatars"
       :color="computedCell.color"
       :avatar-count="computedCell.avatarCount"

package/lib/components/STableCellAvatar.vue

@@ -1,48 +1,31 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import SAvatar from './SAvatar.vue'
 import SLink from './SLink.vue'
 
-const props = defineProps<{
+defineProps<{
   value?: any
   record?: any
-  image?: string | null | ((value: any, record: any) => string | null | undefined)
-  name?: string | null | ((value: any, record: any) => string | null | undefined)
-  link?: string | null | ((value: any, record: any) => string | null | undefined)
+  image?: string | null
+  name?: string | null
+  link?: string | null
   color?: 'neutral' | 'soft' | 'mute'
   onClick?(value: any, record: any): void
 }>()
-
-const _image = computed(() => resolve(props.image))
-const _name = computed(() => resolve(props.name))
-const _link = computed(() => resolve(props.link))
-
-function resolve(
-  value?: string | null | ((value: any, record: any) => string | null | undefined)
-) {
-  if (value == null || value === '') {
-    return null
-  }
-
-  return typeof value === 'function'
-    ? value(props.value, props.record)
-    : value
-}
 </script>
 
 <template>
-  <div class="STableCellAvatar" :class="[{ link: link || onClick }, color]">
+  <div class="STableCellAvatar" :class="[{ link: !!(link || onClick) }, color]">
     <SLink
       class="container"
-      :href="_link ?? undefined"
+      :href="link || undefined"
       :role="onClick ? 'button' : null"
       @click="() => onClick?.(value, record)"
     >
-      <div v-if="_image || _name" class="avatar">
-        <SAvatar size="mini" :avatar="_image" :name="_name" />
+      <div v-if="image || name" class="avatar">
+        <SAvatar size="mini" :avatar="image" :name="name" />
       </div>
-      <span v-if="_name" class="name">
-        {{ _name }}
+      <span v-if="name" class="name">
+        {{ name }}
       </span>
     </SLink>
   </div>

package/lib/components/STableCellAvatars.vue

@@ -5,9 +5,7 @@ import { type Position } from '../composables/Tooltip'
 import SAvatar from './SAvatar.vue'
 
 const props = withDefaults(defineProps<{
-  value?: any
-  record?: any
-  avatars: TableCellAvatarsOption[] | ((value: any, record: any) => TableCellAvatarsOption[])
+  avatars: TableCellAvatarsOption[]
   color?: 'neutral' | 'soft' | 'mute'
   avatarCount?: number
   nameCount?: number
@@ -17,22 +15,16 @@ const props = withDefaults(defineProps<{
   nameCount: 2
 })
 
-const _avatars = computed(() => {
-  return typeof props.avatars === 'function'
-    ? props.avatars(props.value, props.record)
-    : props.avatars
-})
-
 const avatarDiff = computed(() => {
-  return _avatars.value.length - props.avatarCount
+  return props.avatars.length - props.avatarCount
 })
 
 const displayAvatars = computed(() => {
-  return _avatars.value.slice(0, props.avatarCount)
+  return props.avatars.slice(0, props.avatarCount)
 })
 
 const nameDiff = computed(() => {
-  return _avatars.value.length - props.nameCount
+  return props.avatars.length - props.nameCount
 })
 
 const displayNames = computed(() => {
@@ -41,8 +33,7 @@ const displayNames = computed(() => {
     return null
   }
 
-  const slicedAvatars = _avatars.value.slice(0, props.nameCount)
-
+  const slicedAvatars = props.avatars.slice(0, props.nameCount)
   const names = slicedAvatars.map((avatar) => avatar.name).join(', ')
 
   if (nameDiff.value > 0) {
@@ -57,11 +48,7 @@ const displayNames = computed(() => {
   <div class="STableCellAvatars" :class="[color]">
     <div class="container">
       <div v-if="displayAvatars.length" class="avatars">
-        <div
-          v-for="(avatar, index) in displayAvatars"
-          :key="index"
-          class="avatar"
-        >
+        <div v-for="(avatar, index) in displayAvatars" :key="index" class="avatar">
           <div class="avatar-box">
             <SAvatar size="mini" :avatar="avatar.image" :name="avatar.name" :tooltip="tooltip" />
           </div>

package/lib/components/STableCellDay.vue

@@ -1,25 +1,18 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { type Day } from '../support/Day'
 
-const props = defineProps<{
-  value?: Day | null
-  record?: any
+defineProps<{
+  day?: Day | null
   align?: 'left' | 'center' | 'right'
-  getter?: Day | null
   format?: string
   color?: 'neutral' | 'soft' | 'mute'
 }>()
-
-const _value = computed(() => {
-  return props.getter ? props.getter : props.value
-})
 </script>
 
 <template>
   <div class="STableCellDay" :class="[align ?? 'left', color ?? 'neutral']">
-    <div v-if="_value" class="value">
-      {{ _value.format(format ?? 'YYYY-MM-DD HH:mm:ss') }}
+    <div v-if="day" class="value">
+      {{ day.format(format ?? 'YYYY-MM-DD HH:mm:ss') }}
     </div>
   </div>
 </template>

package/lib/components/STableCellNumber.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { type Component, computed } from 'vue'
 import { type TableCellValueColor } from '../composables/Table'
 import { format } from '../support/Num'
-import SIcon from './SIcon.vue'
 import SLink from './SLink.vue'
 
 const props = defineProps<{
   value?: any
   record?: any
   align?: 'left' | 'center' | 'right'
-  icon?: any
-  getter?: number | null
+  icon?: Component
+  number?: number | null
   separator?: boolean
   color?: TableCellValueColor
   iconColor?: TableCellValueColor
@@ -18,14 +17,14 @@ const props = defineProps<{
   onClick?(value: any, record: any): void
 }>()
 
-const _value = computed(() => props.getter ?? props.value)
+const _value = computed(() => props.number ?? props.value)
 const _color = computed(() => props.color ?? 'neutral')
 const _iconColor = computed(() => props.iconColor ?? _color.value)
 
 const classes = computed(() => [
   props.align ?? 'left',
   _color,
-  { link: props.link || props.onClick }
+  { link: !!(props.link || props.onClick) }
 ])
 </script>
 
@@ -38,10 +37,10 @@ const classes = computed(() => [
       :role="onClick ? 'button' : null"
       @click="() => onClick?.(value, record)"
     >
-      <div v-if="icon" class="icon" :class="[_iconColor]">
-        <SIcon :icon="icon" class="svg" />
+      <div v-if="icon" class="icon" :class="_iconColor">
+        <component :is="icon" class="svg" />
       </div>
-      <div class="value" :class="[_color ?? 'neutral']">
+      <div class="value" :class="_color">
         {{ separator ? format(_value) : _value }}
       </div>
     </SLink>

package/lib/components/STableCellPill.vue

@@ -1,43 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import SPill, { type Mode } from './SPill.vue'
 
-const props = defineProps<{
-  value?: any
-  record?: any
-  getter?: string | ((value: any, record: any) => string)
-  color?: Mode | ((value: any, record: any) => Mode)
+defineProps<{
+  pill?: string
+  color?: Mode
 }>()
-
-const _value = computed(() => {
-  if (props.getter === undefined) {
-    return props.value
-  }
-
-  return typeof props.getter === 'string'
-    ? props.getter
-    : props.getter(props.value, props.record)
-})
-
-const _color = computed(() => {
-  if (props.color === undefined) {
-    return props.color
-  }
-
-  return typeof props.color === 'string'
-    ? props.color
-    : props.color(props.value, props.record)
-})
 </script>
 
 <template>
-  <div class="STableCellPill" :class="[_color ?? 'neutral']">
-    <SPill
-      v-if="_value"
-      size="mini"
-      :mode="_color"
-      :label="_value"
-    />
+  <div class="STableCellPill" :class="[color || 'neutral']">
+    <SPill v-if="pill" size="mini" :mode="color" :label="pill" />
   </div>
 </template>