@globalbrain/sefirot 2.1.4 → 2.2.1

package/lib/components/SInputDropdown.vue

@@ -83,6 +83,14 @@ const hasSelected = computed(() => {
   return selected.value.length > 0
 })
 
+const removable = computed(() => {
+  if (isArray(props.modelValue)) {
+    return props.nullable || selected.value.length > 1
+  }
+
+  return !!props.nullable
+})
+
 async function handleOpen() {
   !props.disabled && open()
 }
@@ -137,6 +145,7 @@ function handleArray(value: OptionValue) {
           <SInputDropdownItem
             v-if="hasSelected"
             :items="selected"
+            :removable="removable"
             :disabled="disabled ?? false"
             @remove="handleSelect"
           />
@@ -223,8 +232,8 @@ function handleArray(value: OptionValue) {
   }
 }
 
-.SInputSelect.has-error {
-  .select {
+.SInputDropdown.has-error {
+  .box {
     border-color: var(--c-danger);
   }
 }
@@ -266,6 +275,8 @@ function handleArray(value: OptionValue) {
   padding: 2px 4px;
   font-weight: 500;
   color: var(--c-text-3);
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .box-icon {

package/lib/components/SInputDropdownItem.vue

@@ -22,6 +22,7 @@ export interface ItemAvatar extends ItemBase {
 
 defineProps<{
   items: Item[]
+  removable: boolean
   disabled: boolean
 }>()
 
@@ -37,6 +38,7 @@ defineEmits<{
         v-if="item.type === 'text' || item.type === undefined"
         :label="item.label"
         :value="item.value"
+        :removable="removable"
         :disabled="disabled"
         @remove="(v) => $emit('remove', v)"
       />
@@ -45,6 +47,7 @@ defineEmits<{
         :label="item.label"
         :image="item.image"
         :value="item.value"
+        :removable="removable"
         :disabled="disabled"
         @remove="(v) => $emit('remove', v)"
       />

package/lib/components/SInputDropdownItemAvatar.vue

@@ -7,6 +7,7 @@ defineProps<{
   label: string
   image?: string | null
   value: string | number | boolean
+  removable: boolean
   disabled: boolean
 }>()
 
@@ -16,7 +17,7 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="SInputDropdownItemAvatar" :class="{ disabled }">
+  <div class="SInputDropdownItemAvatar" :class="{ disabled, removable }">
     <div class="user">
       <div class="avatar">
         <SAvatar size="nano" :avatar="image" :name="label" />
@@ -24,7 +25,7 @@ defineEmits<{
       <p class="name">{{ label }}</p>
     </div>
 
-    <div v-if="!disabled" class="remove" role="button" @click="$emit('remove', value)">
+    <div v-if="!disabled && removable" class="remove" role="button" @click="$emit('remove', value)">
       <div class="remove-box">
         <SIcon :icon="IconX" class="remove-icon" />
       </div>
@@ -37,10 +38,14 @@ defineEmits<{
   display: flex;
   border: 1px solid var(--c-divider-light);
   border-radius: 14px;
-  padding: 0;
+  padding: 0 12px 0 0;
   background-color: var(--c-bg-mute);
 }
 
+.SInputDropdownItemAvatar.removable {
+  padding: 0;
+}
+
 .SInputDropdownItemUserAvatar.disabled {
   padding: 0 10px 0 0;
   background-color: var(--c-gray-light-4);

package/lib/components/SInputDropdownItemText.vue

@@ -5,6 +5,7 @@ import SIcon from './SIcon.vue'
 defineProps<{
   label: string
   value: string | number | boolean
+  removable: boolean
   disabled: boolean
 }>()
 
@@ -14,10 +15,10 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="SInputDropdownItemText" :class="{ disabled }">
+  <div class="SInputDropdownItemText" :class="{ disabled, removable }">
     <p class="text">{{ label }}</p>
 
-    <div v-if="!disabled" class="remove" role="button" @click.stop="$emit('remove', value)">
+    <div v-if="!disabled && removable" class="remove" role="button" @click.stop="$emit('remove', value)">
       <div class="remove-box">
         <SIcon :icon="IconX" class="remove-icon" />
       </div>
@@ -30,12 +31,16 @@ defineEmits<{
   display: flex;
   border: 1px solid var(--c-divider-light);
   border-radius: 14px;
-  padding: 0 0 0 12px;
+  padding: 0 12px;
   background-color: var(--c-bg-mute);
 }
 
+.SInputDropdownItemText.removable {
+  padding: 0 0 0 12px;
+}
+
 .SInputDropdownItemText.disabled {
-  padding: 0 10px 0;
+  padding: 0 10px;
   background-color: var(--c-gray-light-4);
 
   .text {

package/lib/components/SInputNumber.vue

@@ -1,56 +1,35 @@
-<template>
-  <SInputText
-    class="SInputNumber"
-    :name="name"
-    :size="size"
-    type="number"
-    :label="label"
-    :note="note"
-    :help="help"
-    :align="align"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :error-message="errorMessage"
-    :display-value="displayValue"
-    :model-value="String(modelValue)"
-    :validation="validation"
-    @update:model-value="emitUpdate"
-  >
-    <template #before-help>
-      <p v-if="helpFormat" class="help-text">
-        {{ valueWithSeparator }}
-      </p>
-    </template>
-  </SInputText>
-</template>
-
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed } from 'vue'
 import { Validatable } from '../composables/Validation'
 import { isNullish } from '../support/Utils'
-import SInputText, { Size, Align } from './SInputText.vue'
+import SInputText from './SInputText.vue'
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  name: { type: String, default: null },
-  label: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  placeholder: { type: String, default: null },
-  align: { type: String as PropType<Align>, default: null },
-  separator: { type: Boolean, default: false },
-  helpFormat: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  errorMessage: { type: Boolean, default: true },
-  modelValue: { type: Number as PropType<number | null>, default: null },
-  validation: { type: Object as PropType<Validatable>, default: null }
-})
+export type Size = 'mini' | 'small' | 'medium'
+export type Align = 'left' | 'center' | 'right'
+
+const props = defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  note?: string
+  help?: string
+  placeholder?: string
+  align?: Align
+  separator?: boolean
+  disabled?: boolean
+  modelValue: number | null
+  displayValue?: string | null
+  hideError?: boolean
+  validation?: Validatable
+}>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number | null): void
+}>()
 
 const valueWithSeparator = computed(() => {
   if (isNullish(props.modelValue)) {
-    return '0'
+    return null
   }
 
   return props.modelValue >= 100000000000000000000
@@ -59,14 +38,36 @@ const valueWithSeparator = computed(() => {
 })
 
 const displayValue = computed(() => {
-  if (!props.separator || valueWithSeparator.value === '0') {
-    return null
+  if (!isNullish(props.displayValue)) {
+    return props.displayValue
   }
 
-  return valueWithSeparator.value
+  return !props.separator || valueWithSeparator.value === null
+    ? null
+    : valueWithSeparator.value
 })
 
-function emitUpdate(value: string | null): void {
-  emit('update:modelValue', value ? Number(value) : null)
+function emitUpdate(value: string | null) {
+  emit('update:modelValue', isNullish(value) ? null : Number(value))
 }
 </script>
+
+<template>
+  <SInputText
+    class="SInputNumber"
+    :name="name"
+    :size="size"
+    type="number"
+    :label="label"
+    :note="note"
+    :help="help"
+    :align="align"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :hide-error="hideError"
+    :display-value="displayValue"
+    :model-value="String(modelValue)"
+    :validation="validation"
+    @update:model-value="emitUpdate"
+  />
+</template>

package/lib/components/SInputText.vue

@@ -141,6 +141,10 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     font-size: 14px;
   }
 
+  .display {
+    top: 0;
+  }
+
   .icon {
     width: 22px;
     height: 30px;
@@ -172,6 +176,10 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     font-size: 16px;
   }
 
+  .display {
+    top: 2px;
+  }
+
   .icon {
     width: 26px;
     height: 38px;
@@ -203,6 +211,10 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
     font-size: 16px;
   }
 
+  .display {
+    top: 0;
+  }
+
   .icon {
     width: 28px;
     height: 46px;
@@ -288,7 +300,6 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 
 .display {
   position: absolute;
-  top: 0;
   left: 0;
   width: 100%;
 }

package/lib/components/SInputYMD.vue

@@ -98,7 +98,7 @@ function createRequiredTouched(): boolean[] {
 <template>
   <SInputBase
     class="SInputYMD"
-    :class="[size, { disabled }]"
+    :class="[size ?? 'small', { disabled }]"
     :label="label"
     :note="note"
     :help="help"

package/lib/components/STableCellPill.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { TableCellPillColor } from '../composables/Table'
+
+export type Color = 'info' | 'success' | 'warning' | 'danger' | 'mute'
 
 const props = defineProps<{
   value?: any
   record: any
   getter?: string | ((value: any) => string)
-  color?: TableCellPillColor | ((value: any) => TableCellPillColor)
+  color?: Color | ((value: any) => Color)
 }>()
 
 const _value = computed(() => {

package/lib/composables/Form.ts

@@ -14,7 +14,7 @@ export interface Form<T extends Record<string, any>> {
 
 export interface UseFormOptions<T extends Record<string, any>> {
   data: T,
-  rules?: Record<string, any>
+  rules?: Record<string, any> | ((state: T) => Record<string, any>)
 }
 
 export function useForm<
@@ -26,7 +26,9 @@ export function useForm<
 
   const data = reactive(options.data)
 
-  const rules = options.rules ?? {}
+  const rules = options.rules
+    ? typeof options.rules === 'function' ? options.rules(data) : options.rules
+    : {}
 
   const validation = useValidation(data, rules)
 

package/lib/validation/rules/index.ts

@@ -1,12 +1,18 @@
+export { or, and, not } from '@vuelidate/validators'
+
 export * from './checked'
 export * from './email'
 export * from './fileExtension'
 export * from './hms'
 export * from './maxLength'
 export * from './minLength'
+export * from './maxValue'
+export * from './minValue'
 export * from './required'
 export * from './requiredHms'
 export * from './requiredIf'
 export * from './requiredYmd'
 export * from './url'
+export * from './month'
 export * from './ymd'
+export * from './rule'

package/lib/validation/rules/maxValue.ts

@@ -0,0 +1,10 @@
+import { helpers, maxValue as baseMaxValue } from '@vuelidate/validators'
+
+export function maxValue(value: number, msg?: string) {
+  return helpers.withMessage(
+    ({ $params }) => {
+      return msg ?? `The value must be less or equal to ${($params as any).max}.`
+    },
+    baseMaxValue(value)
+  )
+}

package/lib/validation/rules/minValue.ts

@@ -0,0 +1,10 @@
+import { helpers, minValue as baseMinValue } from '@vuelidate/validators'
+
+export function minValue(value: number, msg?: string) {
+  return helpers.withMessage(
+    ({ $params }) => {
+      return msg ?? `The value must be greater or equal to ${($params as any).min}.`
+    },
+    baseMinValue(value)
+  )
+}

package/lib/validation/rules/month.ts

@@ -0,0 +1,11 @@
+import { helpers } from '@vuelidate/validators'
+import { month as baseMonth } from '../validators/month'
+
+export function month(msg?: string) {
+  return helpers.withMessage(
+    () => msg ?? 'The month is invalid.',
+    (value: number) => {
+      return !helpers.req(value) || baseMonth(value)
+    }
+  )
+}

package/lib/validation/rules/rule.ts

@@ -0,0 +1,8 @@
+import { helpers } from '@vuelidate/validators'
+
+export function rule(validation: (value: any) => boolean, msg?: string) {
+  return helpers.withMessage(
+    () => msg ?? 'The value is invalid.',
+    (value: any) => !helpers.req(value) || validation(value)
+  )
+}

package/lib/validation/validators/month.ts

@@ -0,0 +1,3 @@
+export function month(value: number): boolean {
+  return value > 0 && value < 13
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.1.4",
+  "version": "2.2.1",
   "description": "Vue Components for Global Brain Design System.",
   "files": [
     "lib"
@@ -84,7 +84,7 @@
     "vitest": "^0.23.4",
     "vue": "^3.2.40",
     "vue-router": "^4.1.5",
-    "vue-tsc": "^0.40.13"
+    "vue-tsc": "^1.0.8"
   },
   "scripts": {
     "docs": "vitepress dev docs --port 3000",