@globalbrain/sefirot 2.49.0 → 3.1.0

package/lib/components/SCard.vue

@@ -35,11 +35,11 @@ const classes = computed(() => [
   background-color: var(--c-gutter);
 }
 
-.SCard.neutral { border-color: var(--c-divider-2); }
-.SCard.info    { border-color: var(--c-info-border); }
-.SCard.success { border-color: var(--c-success-border); }
-.SCard.warning { border-color: var(--c-warning-border); }
-.SCard.danger  { border-color: var(--c-danger-border); }
+.SCard.neutral { border-color: var(--c-divider); }
+.SCard.info    { border-color: var(--c-border-info-1); }
+.SCard.success { border-color: var(--c-border-success-1); }
+.SCard.warning { border-color: var(--c-border-warning-1); }
+.SCard.danger  { border-color: var(--c-border-danger-1); }
 
 .SCard.collapsed {
   height: 48px;

package/lib/components/SCardHeader.vue

@@ -10,6 +10,6 @@
   align-items: center;
   border-radius: 5px 5px 0 0;
   height: 48px;
-  background-color: var(--c-bg-soft);
+  background-color: var(--c-bg-elv-4);
 }
 </style>

package/lib/components/SCardHeaderTitle.vue

@@ -22,8 +22,8 @@ defineProps<{
 }
 
 .SCardHeaderTitle.neutral { color: var(--c-text-1); }
-.SCardHeaderTitle.info    { color: var(--c-info-text); }
-.SCardHeaderTitle.success { color: var(--c-success-text); }
-.SCardHeaderTitle.warning { color: var(--c-warning-text); }
-.SCardHeaderTitle.danger  { color: var(--c-danger-text); }
+.SCardHeaderTitle.info    { color: var(--c-text-info-1); }
+.SCardHeaderTitle.success { color: var(--c-text-success-1); }
+.SCardHeaderTitle.warning { color: var(--c-text-warning-1); }
+.SCardHeaderTitle.danger  { color: var(--c-text-danger-1); }
 </style>

package/lib/components/SContent.vue

@@ -24,11 +24,11 @@
 }
 
 .SContent :deep(a) {
-  color: var(--c-info-text);
+  color: var(--c-text-info-1);
   transition: color 0.25s;
 
   &:hover {
-    color: var(--c-info-text-dark);
+    color: var(--c-text-info-2);
   }
 }
 

package/lib/components/SDescItem.vue

@@ -32,7 +32,7 @@ const labelWidth = computed(() => {
 }
 
 .SDesc.divider > .SDescItem {
-  border-bottom: 1px dashed var(--c-divider-1);
+  border-bottom: 1px dashed var(--c-divider);
   padding-bottom: 7px;
 }
 </style>

package/lib/components/SDescLink.vue

@@ -41,11 +41,11 @@ const link = computed(() => {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--c-info-text);
+  color: var(--c-text-info-1);
   transition: color 0.25s;
 
   &:hover {
-    color: var(--c-info-text-dark);
+    color: var(--c-text-info-2);
   }
 }
 </style>

package/lib/components/SDescText.vue

@@ -53,11 +53,11 @@ const lineClamp = computed(() => props.lineClamp ?? 'none')
 }
 
 .value :deep(a) {
-  color: var(--c-info-text);
+  color: var(--c-text-info-1);
   transition: color 0.25s;
 
   &:hover {
-    color: var(--c-info-text-dark);
+    color: var(--c-text-info-2);
   }
 }
 </style>

package/lib/components/SDropdown.vue

@@ -19,7 +19,7 @@ defineProps<{
 
 <style scoped lang="postcss">
 .SDropdown {
-  border: 1px solid var(--c-divider-2);
+  border: 1px solid var(--c-divider);
   border-radius: 6px;
   min-width: 256px;
   max-height: 384px;

package/lib/components/SDropdownSectionFilter.vue

@@ -105,11 +105,10 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   z-index: 10;
   border-bottom: 1px solid var(--c-gutter);
   padding: 8px;
-  background-color: var(--c-bg-elv-up);
 }
 
 .input {
-  border: 1px solid var(--c-divider-1);
+  border: 1px solid var(--c-divider);
   border-radius: 6px;
   padding: 0 8px;
   width: 100%;
@@ -141,7 +140,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 
   &:hover,
   &:focus {
-    background-color: var(--c-mute);
+    background-color: var(--c-bg-mute-1);
   }
 }
 
@@ -155,7 +154,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid var(--c-divider-1);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 4px;
   width: 16px;
   height: 16px;
@@ -163,8 +162,8 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   transition: border-color 0.1s, background-color 0.1s;
 
   .button.active & {
-    border-color: var(--c-info-text);
-    background-color: var(--c-info);
+    border-color: var(--c-fg-info-1);
+    background-color: var(--c-fg-info-1);
   }
 }
 
@@ -184,7 +183,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
 .radio {
   position: relative;
   flex-shrink: 0;
-  border: 1px solid var(--c-divider-1);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 50%;
   margin-top: 8px;
   margin-bottom: 8px;
@@ -194,7 +193,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   transition: border-color 0.25s;
 
   .button.active & {
-    border-color: var(--c-info-light);
+    border-color: var(--c-border-info-1);
   }
 }
 
@@ -209,7 +208,7 @@ function handleClick(option: DropdownSectionFilterOption, value: string | number
   align-items: center;
   border-radius: 50%;
   width: 100%;
-  background-color: var(--c-info-light);
+  background-color: var(--c-fg-info-1);
   opacity: 0;
   transform: scale(0);
   transition: opacity 0.25s, transform 0.1s;

package/lib/components/SDropdownSectionMenu.vue

@@ -38,7 +38,7 @@ defineProps<{
   transition: color 0.25s, background-color 0.25s;
 
   &:hover:not(:disabled) {
-    background-color: var(--c-mute);
+    background-color: var(--c-bg-mute-1);
   }
 
   &:disabled {

package/lib/components/SHeadLead.vue

@@ -12,11 +12,11 @@
 }
 
 .SHeadLead :deep(a) {
-  color: var(--c-info-text);
+  color: var(--c-text-info-1);
   transition: color 0.25s;
 
   &:hover {
-    color: var(--c-info-text-dark);
+    color: var(--c-text-info-2);
   }
 }
 </style>

package/lib/components/SHeadTitle.vue

@@ -21,8 +21,8 @@ defineProps<{
 }
 
 .SHeadTitle.neutral { color: var(--c-text-1); }
-.SHeadTitle.info    { color: var(--c-info-text); }
-.SHeadTitle.success { color: var(--c-success-text); }
-.SHeadTitle.warning { color: var(--c-warning-text); }
-.SHeadTitle.danger  { color: var(--c-danger-text); }
+.SHeadTitle.info    { color: var(--c-text-info-1); }
+.SHeadTitle.success { color: var(--c-text-success-1); }
+.SHeadTitle.warning { color: var(--c-text-warning-1); }
+.SHeadTitle.danger  { color: var(--c-text-danger-1); }
 </style>

package/lib/components/SInputBase.vue

@@ -132,7 +132,7 @@ function getErrorMsg(validation: Validatable) {
 
   &:hover, &:focus, &:focus-within {
     .label-info {
-      color: var(--c-info-text);
+      color: var(--c-text-info-1);
     }
   }
 
@@ -191,10 +191,10 @@ function getErrorMsg(validation: Validatable) {
 
   &.neutral { color: var(--c-text-1); }
   &.mute    { color: var(--c-text-2); }
-  &.info    { color: var(--c-info-text); }
-  &.success { color: var(--c-success-text); }
-  &.warning { color: var(--c-warning-text); }
-  &.danger  { color: var(--c-danger-text); }
+  &.info    { color: var(--c-text-info-1); }
+  &.success { color: var(--c-text-success-1); }
+  &.warning { color: var(--c-text-warning-1); }
+  &.danger  { color: var(--c-text-danger-1); }
 }
 
 .check-icon {

package/lib/components/SInputCheckbox.vue

@@ -109,15 +109,15 @@ function onClick() {
 
   &:hover {
     .box {
-      border-color: var(--c-info-light);
+      border-color: var(--c-border-info-1);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-info-light);
-    background-color: var(--c-info-light);
+    border-color: var(--c-fg-info-1);
+    background-color: var(--c-fg-info-1);
   }
 
   .check {
@@ -128,7 +128,7 @@ function onClick() {
 
 .box {
   position: relative;
-  border: 1px solid var(--c-divider-1);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 4px;
   width: 16px;
   height: 16px;
@@ -151,7 +151,7 @@ function onClick() {
 .check-icon {
   width: 10px;
   height: 10px;
-  color: var(--c-white);
+  color: var(--c-white-1);
 }
 
 .text {

package/lib/components/SInputImage.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { type IconifyIcon } from '@iconify/vue/dist/offline'
+import IconImage from '@iconify-icons/ph/image-bold'
+import { computed, ref } from 'vue'
+import { useImageSrcFromFile } from '../composables/Image'
+import { type Validatable } from '../composables/Validation'
+import SButton from './SButton.vue'
+import SIcon from './SIcon.vue'
+import SInputBase from './SInputBase.vue'
+
+export type Size = 'mini' | 'small' | 'medium'
+export type CheckColor = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+export type ImageType = 'rectangle' | 'circle'
+
+const props = withDefaults(defineProps<{
+  size?: Size
+  label?: string
+  info?: string
+  note?: string
+  help?: string
+  checkIcon?: IconifyIcon
+  checkText?: string
+  checkColor?: CheckColor
+  imageType?: ImageType
+  imageWidth?: string
+  imageAspectRatio?: string
+  selectText?: string
+  removeText?: string
+  accept?: string
+  nullable?: boolean
+  disabled?: boolean
+  value?: File | string | null
+  modelValue?: File | string | null
+  hideError?: boolean
+  validation?: Validatable
+}>(), {
+  imageType: 'rectangle',
+  imageWidth: '96px',
+  imageAspectRatio: '1 / 1',
+  selectText: 'Select image',
+  removeText: 'Remove image',
+  nullable: true
+})
+
+const emit = defineEmits<{
+  (e: 'update:model-value', value: File | null): void
+  (e: 'change', value: File | null): void
+}>()
+
+const fileInput = ref<HTMLInputElement | null>(null)
+
+const _value = computed(() => {
+  return (props.modelValue !== undefined)
+    ? props.modelValue
+    : props.value !== undefined ? props.value : null
+})
+
+const { src: imageSrc } = useImageSrcFromFile(_value)
+
+function openFileSelect() {
+  fileInput.value!.click()
+}
+
+function onFileSelect(e: Event) {
+  const file = ((e.target as HTMLInputElement).files ?? [])[0]
+
+  emit('update:model-value', file ?? null)
+  emit('change', file ?? null)
+
+  file && props.validation?.$touch()
+}
+
+function onFileDelete() {
+  fileInput.value!.value = ''
+
+  emit('update:model-value', null)
+  emit('change', null)
+}
+</script>
+
+<template>
+  <SInputBase
+    class="SInputImage"
+    :class="[size]"
+    :label="label"
+    :note="note"
+    :info="info"
+    :check-icon="checkIcon"
+    :check-text="checkText"
+    :check-color="checkColor"
+    :hide-error="hideError"
+    :validation="validation"
+  >
+    <template #default>
+      <input
+        ref="fileInput"
+        class="file-input"
+        type="file"
+        :accept="accept"
+        @change="onFileSelect"
+      >
+
+      <div class="container">
+        <div class="image" :class="[imageType]">
+          <div v-if="imageSrc" class="image-fill">
+            <img class="image-fill-src" :src="imageSrc">
+          </div>
+          <div v-else class="image-empty">
+            <div class="image-empty-inner">
+              <SIcon class="image-empty-icon" :icon="IconImage" />
+            </div>
+          </div>
+        </div>
+        <div class="control">
+          <div class="actions">
+            <SButton
+              size="small"
+              :label="selectText"
+              :disabled="disabled"
+              @click="openFileSelect"
+            />
+            <SButton
+              v-if="nullable && imageSrc"
+              size="small"
+              mode="danger"
+              :label="removeText"
+              :disabled="disabled"
+              @click="onFileDelete"
+            />
+          </div>
+          <p v-if="help" class="help">
+            {{ help }}
+          </p>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="$slots.info" #info>
+      <slot name="info" />
+    </template>
+  </SInputBase>
+</template>
+
+<style scoped lang="postcss">
+.file-input {
+  display: none;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 4px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+    align-items: center;
+    gap: 24px;
+  }
+}
+
+.image {
+  display: flex;
+  flex-shrink: 0;
+  width: var(--input-image-width, v-bind(imageWidth));
+  aspect-ratio: v-bind(imageAspectRatio);
+  overflow: hidden;
+}
+
+.image-fill {
+  display: flex;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.image-fill-src {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.image-empty {
+  display: flex;
+  border: 1px solid var(--c-border-mute-1);
+  padding: 8px;
+  width: 100%;
+  height: 100%;
+}
+
+.image-empty-inner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px dashed var(--c-border-mute-1);
+  width: 100%;
+  height: 100%;
+}
+
+.image-empty-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--c-text-3);
+}
+
+.control {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.help {
+  margin: 0;
+  line-height: 20px;
+  font-size: 12px;
+  color: var(--c-text-2);
+}
+
+.image.rectangle .image-fill,
+.image.rectangle .image-empty {
+  border-radius: 6px;
+}
+
+.image.rectangle .image-empty-inner {
+  border-radius: 3px;
+}
+
+.image.circle .image-fill,
+.image.circle .image-empty,
+.image.circle .image-empty-inner {
+  border-radius: 50%;
+}
+</style>

package/lib/components/SInputRadio.vue

@@ -89,14 +89,14 @@ function onClick() {
 
   &:hover {
     .box {
-      border-color: var(--c-info-light);
+      border-color: var(--c-border-info-1);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-info-light);
+    border-color: var(--c-fg-info-1);
   }
 
   .check {
@@ -107,7 +107,7 @@ function onClick() {
 
 .box {
   position: relative;
-  border: 1px solid var(--c-divider-1);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 50%;
   width: 16px;
   height: 16px;
@@ -126,7 +126,7 @@ function onClick() {
   align-items: center;
   border-radius: 50%;
   width: 100%;
-  background-color: var(--c-info-light);
+  background-color: var(--c-fg-info-1);
   opacity: 0;
   transform: scale(0);
   transition: opacity 0.25s, transform 0.1s;

package/lib/components/SSheet.vue

@@ -45,7 +45,7 @@ defineEmits<{
     box-shadow: var(--shadow-depth-5);
 
     .dark & {
-      background-color: var(--c-bg-soft);
+      background-color: var(--c-bg-elv-4);
     }
   }
 }

package/lib/components/SState.vue

@@ -28,11 +28,11 @@ const classes = computed(() => [
 .SState {
   display: inline-flex;
   align-items: center;
-  border: 1px solid var(--c-divider-2);
+  border: 1px solid var(--c-border-mute-1);
   border-radius: 6px;
   font-weight: 500;
   white-space: nowrap;
-  background-color: var(--c-mute);
+  background-color: var(--c-bg-mute-1);
 }
 
 .SState.mini {
@@ -105,23 +105,23 @@ const classes = computed(() => [
 
 .SState.mute  {
   .label     { color: var(--c-text-2); }
-  .indicator { background-color: var(--c-mute-darker); }
+  .indicator { background-color: var(--c-fg-gray-1); }
 }
 
 .SState.info  {
-  .indicator { background-color: var(--c-info-text); }
+  .indicator { background-color: var(--c-fg-info-1); }
 }
 
 .SState.success  {
-  .indicator { background-color: var(--c-success-text); }
+  .indicator { background-color: var(--c-fg-success-1); }
 }
 
 .SState.warning  {
-  .indicator { background-color: var(--c-warning-text); }
+  .indicator { background-color: var(--c-fg-warning-1); }
 }
 
 .SState.danger  {
-  .indicator { background-color: var(--c-danger-text); }
+  .indicator { background-color: var(--c-fg-danger-1); }
 }
 
 .label {

package/lib/components/STableCell.vue

@@ -126,7 +126,7 @@ const computedCell = computed<TableCell | undefined>(() =>
 
 <style scoped lang="postcss">
 .STableCell {
-  background-color: var(--c-bg-elv-up);
+  background-color: var(--c-bg-elv-3);
   transition: background-color 0.1s;
   overflow: hidden;
 

package/lib/components/STableColumn.vue

@@ -148,7 +148,7 @@ function stopDialogPositionListener() {
 
 <style scoped lang="postcss">
 .STableColumn {
-  background-color: var(--c-bg-soft);
+  background-color: var(--c-bg-elv-4);
 
   &.has-header {
     border-top: 1px solid var(--c-divider-2);

package/lib/components/STableHeader.vue

@@ -60,7 +60,7 @@ const resetAction = computed(() => {
   border-radius: calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px) 0 0;
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);
-  background-color: var(--c-bg-soft);
+  background-color: var(--c-bg-elv-4);
 
   &.borderless {
     border-radius: 0;

package/lib/components/STableHeaderActionItem.vue

@@ -4,7 +4,7 @@ import SButton from './SButton.vue'
 
 withDefaults(defineProps<TableHeaderAction>(), {
   show: true,
-  mode: 'mute',
+  mode: 'default',
   labelMode: 'neutral'
 })
 </script>

package/lib/composables/Image.ts

@@ -0,0 +1,46 @@
+import { type MaybeRefOrGetter, type Ref, ref, toValue, watchEffect } from 'vue'
+import { isFile, isString } from '../support/Utils'
+
+export interface ImageSrcFromFile {
+  src: Ref<string | null>
+}
+
+/**
+ * Get renderable image src from the given file. If a string is given, it will
+ * be returned as is. It is useful when you want to render an image from a
+ * remote URL.
+ */
+export function useImageSrcFromFile(
+  file: MaybeRefOrGetter<File | string | null>
+): ImageSrcFromFile {
+  const reader = new FileReader()
+  const src = ref<string | null>(null)
+
+  reader.onload = function () {
+    src.value = this.result?.toString() ?? null
+  }
+
+  watchEffect(() => {
+    read()
+  })
+
+  function read(): void {
+    const f = toValue(file)
+
+    if (isFile(f)) {
+      reader.readAsDataURL(f)
+      return
+    }
+
+    if (isString(f)) {
+      src.value = f
+      return
+    }
+
+    src.value = null
+  }
+
+  return {
+    src
+  }
+}