@globalbrain/sefirot 4.10.0 → 4.12.0

package/lib/components/SDescFile.vue

@@ -52,7 +52,7 @@ const items = computed(() => {
   gap: 1px;
   border: 1px solid var(--c-divider);
   border-radius: 6px;
-  margin-top: 2px;
+  margin-top: 4px;
   background-color: var(--c-gutter);
   overflow: hidden;
 }

package/lib/components/SDescItem.vue

@@ -29,7 +29,17 @@ const labelWidth = computed(() => {
 }
 
 .SDesc.row > .SDescItem {
-  grid-template-columns: var(--desc-label-width, v-bind(labelWidth)) minmax(0, 1fr);
+  & {
+    grid-template-columns: var(--desc-label-width, v-bind(labelWidth)) minmax(0, 1fr);
+  }
+
+  & > :deep(.SDescLabel) {
+    height: 24px;
+  }
+
+  & > :deep(.SDescLabel > .value) {
+    line-height: 24px;
+  }
 }
 
 .SDesc.divider > .SDescItem:not(:has(> .SDescFile)) {

package/lib/components/SDescLabel.vue

@@ -1,7 +1,40 @@
 <script setup lang="ts">
-defineProps<{
+import { type Component } from 'vue'
+import { type ActionList } from './SActionList.vue'
+import SActionMenu from './SActionMenu.vue'
+import SButton, { type Mode, type Tooltip } from './SButton.vue'
+
+export interface Props {
   value?: string | null
-}>()
+  actions?: Action[]
+}
+
+export type Action = ActionButton | ActionMenu
+
+export interface ActionBase {
+  type?: 'button' | 'menu'
+  mode?: Mode
+  icon: Component
+  loading?: boolean
+  disabled?: boolean
+  tooltip?: string | Tooltip
+}
+
+export interface ActionButton extends ActionBase {
+  type?: 'button'
+  onClick(): void
+}
+
+export interface ActionMenu extends ActionBase {
+  type: 'menu'
+  options: ActionList
+}
+
+defineProps<Props>()
+
+function isActionButton(action: Action): action is ActionButton {
+  return (action.type ?? 'button') === 'button'
+}
 </script>
 
 <template>
@@ -10,19 +43,47 @@ defineProps<{
       <slot v-if="$slots.default" />
       <template v-else>{{ value }}</template>
     </div>
+    <div v-if="actions?.length" class="actions">
+      <template v-for="action, index in actions" :key="index">
+        <SButton
+          v-if="isActionButton(action)"
+          type="text"
+          size="mini"
+          :mode="action.mode ?? 'mute'"
+          :icon="action.icon"
+          :loading="action.loading"
+          :disabled="action.disabled"
+          :tooltip="action.tooltip"
+          @click="action.onClick"
+        />
+        <SActionMenu
+          v-else
+          type="text"
+          size="mini"
+          :mode="action.mode ?? 'mute'"
+          :icon="action.icon"
+          :loading="action.loading"
+          :disabled="action.disabled"
+          :tooltip="action.tooltip"
+          :options="[{ type: 'menu', options: action.options }]"
+        />
+      </template>
+    </div>
   </div>
 </template>
 
 <style scoped lang="postcss">
 .SDescLabel {
   display: flex;
-  height: 24px;
+  gap: 16px;
+  height: 28px;
 }
 
 .value {
-  line-height: 24px;
-  font-size: 12px;
-  font-weight: 500;
+  flex-grow: 1;
+  line-height: 28px;
+  font-size: 14px;
+  font-weight: 400;
   color: var(--c-text-2);
   white-space: nowrap;
   overflow: hidden;

package/lib/components/SInputBase.vue

@@ -4,9 +4,8 @@ import { type Component, computed, unref, useSlots } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import STooltip from './STooltip.vue'
 
-type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
-
-const props = defineProps<{
+export interface Props {
+  size?: Size
   name?: string
   label?: string
   info?: string
@@ -16,11 +15,24 @@ const props = defineProps<{
   checkText?: string
   checkColor?: Color
   validation?: Validatable
+  warning?: string
   hideError?: boolean
-}>()
+  hideWarning?: boolean
+}
+
+export type Size = 'mini' | 'small' | 'medium'
+export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps<Props>()
 
 const slots = useSlots()
 
+const classes = computed(() => [
+  props.size ?? 'small',
+  { 'has-error': error.value?.has },
+  { 'has-warning': props.warning }
+])
+
 const hasInfo = computed(() => {
   return slots.info || props.info
 })
@@ -53,7 +65,7 @@ function getErrorMsg(validation: Validatable) {
 </script>
 
 <template>
-  <div class="SInputBase" :class="{ 'has-error': error?.has }">
+  <div class="SInputBase" :class="classes">
     <label v-if="label" class="label" :for="name">
       <span class="label-text">{{ label }}</span>
 
@@ -76,8 +88,9 @@ function getErrorMsg(validation: Validatable) {
 
     <div class="help">
       <slot name="before-help" />
-      <p v-if="error?.show" class="help-error">{{ error.msg }}</p>
-      <p v-if="help" class="help-text">{{ help }}</p>
+      <p v-if="error?.show" class="help-value help-error">{{ error.msg }}</p>
+      <p v-if="warning && !hideWarning" class="help-value help-warning">{{ warning }}</p>
+      <p v-if="help" class="help-value help-text">{{ help }}</p>
     </div>
   </div>
 </template>
@@ -102,12 +115,19 @@ function getErrorMsg(validation: Validatable) {
   .label-text { font-size: var(--input-label-font-size, var(--input-medium-label-font-size)); }
 }
 
-.SInputBase.has-error {
+.SInputBase.has-error,
+.SInputBase.has-warning.has-error {
   .label-text {
     color: var(--input-error-text-color);
   }
 }
 
+.SInputBase.has-warning {
+  .label-text {
+    color: var(--input-warning-text-color);
+  }
+}
+
 .label {
   display: flex;
   align-items: flex-start;
@@ -118,7 +138,7 @@ function getErrorMsg(validation: Validatable) {
 }
 
 .label-text {
-  font-weight: 500;
+  font-weight: 400;
   color: var(--input-label-color);
   transition: color 0.25s;
 }
@@ -173,29 +193,32 @@ function getErrorMsg(validation: Validatable) {
   position: relative;
 }
 
-.help-error {
+.help-value {
   width: 100%;
   max-width: 65ch;
   margin: 0;
   padding: 6px 0 0 0;
-  line-height: 18px;
+  line-height: 20px;
   font-size: 12px;
   font-weight: 400;
-  color: var(--input-error-text-color);
   transition: opacity 0.25s, transform 0.25s;
 }
 
+.help-error {
+  color: var(--input-error-text-color);
+}
+
+.help-warning {
+  color: var(--input-warning-text-color);
+}
+
 .help-text {
-  max-width: 65ch;
-  margin: 0;
-  padding: 6px 0 0;
-  line-height: 20px;
-  font-size: 12px;
-  font-weight: 400;
   color: var(--c-text-2);
 }
 
+.help-error + .help-warning,
 .help-error + .help-text,
+.help-warning + .help-text,
 .help-text + .help-error,
 .help-text + .help-text {
   padding: 0;

package/lib/components/SInputDropdown.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import IconCaretDown from '~icons/ph/caret-down-bold'
-import IconCaretUp from '~icons/ph/caret-up-bold'
+import IconCaretDown from '~icons/ph/caret-down'
+import IconCaretUp from '~icons/ph/caret-up'
 import xor from 'lodash-es/xor'
 import { type Component, computed, ref } from 'vue'
 import { type DropdownSectionFilter, useManualDropdownPosition } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
+import { useTrans } from '../composables/Lang'
 import { type Validatable } from '../composables/Validation'
 import SDropdown from './SDropdown.vue'
 import SInputBase from './SInputBase.vue'
@@ -52,13 +53,19 @@ const props = defineProps<{
   nullable?: boolean
   closeOnClick?: boolean
   disabled?: boolean
-  modelValue: PrimitiveValue | ArrayValue
   validation?: Validatable
 }>()
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: PrimitiveValue | ArrayValue): void
-}>()
+const model = defineModel<PrimitiveValue | ArrayValue>({ required: true })
+
+const { t } = useTrans({
+  en: {
+    ph: 'Select items'
+  },
+  ja: {
+    ph: '項目を選択してください'
+  }
+})
 
 const container = ref<any>(null)
 
@@ -73,28 +80,28 @@ const classes = computed(() => [
 const dropdownOptions = computed<DropdownSectionFilter[]>(() => [{
   type: 'filter',
   search: props.noSearch === undefined ? true : !props.noSearch,
-  selected: props.modelValue,
+  selected: model.value,
   options: props.options,
   onClick: handleSelect
 }])
 
 const selected = computed(() => {
-  if (Array.isArray(props.modelValue)) {
-    return props.options.filter((o) => (props.modelValue as ArrayValue).includes(o.value))
+  if (Array.isArray(model.value)) {
+    return props.options.filter((o) => (model.value as ArrayValue).includes(o.value))
   }
 
-  const item = props.options.find((o) => o.value === props.modelValue)
+  const item = props.options.find((o) => o.value === model.value)
 
-  return item ? [item] : []
+  return item ?? null
 })
 
 const hasSelected = computed(() => {
-  return selected.value.length > 0
+  return Array.isArray(selected.value) ? selected.value.length > 0 : !!selected.value
 })
 
 const removable = computed(() => {
-  if (Array.isArray(props.modelValue)) {
-    return props.nullable || selected.value.length > 1
+  if (Array.isArray(model.value)) {
+    return props.nullable || (selected.value as Option[]).length > 1
   }
 
   return !!props.nullable
@@ -110,27 +117,25 @@ async function handleOpen() {
 function handleSelect(value: OptionValue) {
   props.validation?.$touch()
 
-  Array.isArray(props.modelValue) ? handleArray(value) : handlePrimitive(value)
+  Array.isArray(model.value) ? handleArray(value) : handlePrimitive(value)
 }
 
 function handlePrimitive(value: OptionValue) {
-  if (value !== props.modelValue) {
-    return emit('update:modelValue', value)
-  }
-
-  if (props.nullable) {
-    emit('update:modelValue', null)
+  if (value !== model.value) {
+    model.value = value
+  } else if (props.nullable) {
+    model.value = null
   }
 }
 
 function handleArray(value: OptionValue) {
-  const difference = xor(props.modelValue as ArrayValue, [value])
+  const difference = xor(model.value as ArrayValue, [value])
 
   if (!props.nullable && difference.length === 0) {
     return
   }
 
-  emit('update:modelValue', difference)
+  model.value = difference
 }
 </script>
 
@@ -160,14 +165,14 @@ function handleArray(value: OptionValue) {
         <div class="box-content">
           <SInputDropdownItem
             v-if="hasSelected"
-            :items="selected"
+            :item="selected!"
             :size="size ?? 'small'"
             :removable="removable"
             :disabled="disabled ?? false"
             @remove="handleSelect"
           />
 
-          <div v-else class="box-placeholder">{{ placeholder }}</div>
+          <div v-else class="box-placeholder">{{ placeholder ?? t.ph }}</div>
         </div>
 
         <div class="box-icon">
@@ -187,6 +192,7 @@ function handleArray(value: OptionValue) {
 <style scoped lang="postcss">
 .container {
   position: relative;
+  width: 100%;
 }
 
 .box {
@@ -209,6 +215,8 @@ function handleArray(value: OptionValue) {
 .box-content {
   display: flex;
   align-items: center;
+  flex-grow: 1;
+  max-width: 100%;
 }
 
 .box-placeholder {
@@ -250,11 +258,15 @@ function handleArray(value: OptionValue) {
   }
 
   .box-content {
-    padding: 3px 30px 3px 8px;
+    padding: 0 30px 0 0;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-mini-font-size));
   }
 
+  .box-placeholder {
+    padding-left: 10px;
+  }
+
   .box-icon {
     top: 3px;
     right: 8px;
@@ -267,11 +279,15 @@ function handleArray(value: OptionValue) {
   }
 
   .box-content {
-    padding: 5px 30px 5px 12px;
+    padding: 0 30px 0 0;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-small-font-size));
   }
 
+  .box-placeholder {
+    padding-left: 12px;
+  }
+
   .box-icon {
     top: 7px;
     right: 8px;
@@ -280,15 +296,19 @@ function handleArray(value: OptionValue) {
 
 .SInputDropdown.medium {
   .box {
-    height: 48px;
+    min-height: 48px;
   }
 
   .box-content {
-    padding: 11px 44px 11px 16px;
+    padding: 0 40px 0 0;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-medium-font-size));
   }
 
+  .box-placeholder {
+    padding-left: 16px;
+  }
+
   .box-icon {
     top: 11px;
     right: 12px;