@globalbrain/sefirot 2.22.0 → 2.23.0

package/lib/components/SInputCheckbox.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import IconCheck from '@iconify-icons/ph/check'
-import type { DefineComponent, PropType } from 'vue'
+import IconCheck from '@iconify-icons/ph/check-bold'
+import { computed } from 'vue'
 import type { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
@@ -9,31 +9,46 @@ import SInputBase from './SInputBase.vue'
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  label: { type: String, default: null },
-  info: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  checkIcon: { type: Object as PropType<IconifyIcon | DefineComponent>, default: null },
-  checkText: { type: String, default: null },
-  checkColor: { type: String as PropType<Color>, default: null },
-  text: { type: String, required: true },
-  modelValue: { type: Boolean, required: true },
-  validation: { type: Object as PropType<Validatable>, default: null }
+const props = withDefaults(defineProps<{
+  size?: Size
+  label?: string
+  info?: string
+  note?: string
+  help?: string
+  checkIcon?: IconifyIcon
+  checkText?: string
+  checkColor?: Color
+  text?: string
+  value?: boolean
+  modelValue?: boolean
+  validation?: Validatable
+  hideError?: boolean
+}>(), {
+  value: undefined,
+  modelValue: undefined
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:model-value', value: boolean): void
+  (e: 'change', value: boolean): void
+}>()
 
-function emitChange() {
-  emit('update:modelValue', !props.modelValue)
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : false
+})
+
+function onClick() {
+  emit('update:model-value', !_value.value)
+  emit('change', !_value.value)
 }
 </script>
 
 <template>
   <SInputBase
     class="SInputCheckbox"
-    :class="[size]"
+    :class="[size ?? 'small']"
     :label="label"
     :note="note"
     :info="info"
@@ -44,21 +59,21 @@ function emitChange() {
     :validation="validation"
   >
     <div class="container">
-      <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
+      <div class="input" :class="{ on: _value }" role="button" @click="onClick">
         <div class="box">
           <div class="check">
             <SIcon :icon="IconCheck" class="check-icon" />
           </div>
         </div>
 
-        <p class="text">{{ text }}</p>
+        <p v-if="text" class="text">{{ text }}</p>
       </div>
     </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped lang="postcss">
 .container {
   display: flex;
 }
@@ -68,19 +83,19 @@ function emitChange() {
   display: flex;
   align-items: center;
   height: 32px;
+  cursor: pointer;
 
   &:hover {
     .box {
-      border-color: var(--c-black);
+      border-color: var(--c-info-light);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-black);
-    background-color: var(--c-black);
-    box-shadow: var(--shadow-depth-3);
+    border-color: var(--c-info-light);
+    background-color: var(--c-info-light);
   }
 
   .check {
@@ -91,11 +106,12 @@ function emitChange() {
 
 .box {
   position: relative;
-  border: 2px solid var(--c-text-3);
-  border-radius: 2px;
-  width: 18px;
-  height: 18px;
-  transition: border-color .25s, background-color .25s, box-shadow .25s;
+  border: 1px solid var(--c-divider-1);
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+  background-color: var(--input-bg-color);
+  transition: border-color 0.25s, background-color 0.25s;
 }
 
 .check {
@@ -118,9 +134,9 @@ function emitChange() {
 
 .text {
   margin: 0;
-  padding-left: 12px;
+  padding-left: 10px;
   line-height: 20px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 400;
 }
 </style>

package/lib/components/SInputCheckboxes.vue

@@ -1,50 +1,73 @@
 <script setup lang="ts">
 import type { IconifyIcon } from '@iconify/vue/dist/offline'
-import type { DefineComponent, PropType } from 'vue'
+import { computed } from 'vue'
+import type { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputCheckbox from './SInputCheckbox.vue'
 
 export type Size = 'mini' | 'small' | 'medium'
 export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
 
-interface CheckboxOption {
+export type Value = string | number | boolean
+
+export interface Option {
   label: string
-  value: any
+  value: Value
 }
 
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  name: { type: String, default: null },
-  label: { type: String, default: null },
-  info: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  checkIcon: { type: Object as PropType<IconifyIcon | DefineComponent>, default: null },
-  checkText: { type: String, default: null },
-  checkColor: { type: String as PropType<Color>, default: null },
-  options: { type: Array as PropType<CheckboxOption[]>, required: true },
-  modelValue: { type: Array, required: true }
+const props = withDefaults(defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  info?: string
+  note?: string
+  help?: string
+  checkIcon?: IconifyIcon
+  checkText?: string
+  checkColor?: Color
+  options: Option[]
+  nullable?: boolean
+  value?: Value[]
+  modelValue?: Value[]
+  validation?: Validatable
+  hideError?: boolean
+}>(), {
+  nullable: true
 })
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:model-value', value: Value[]): void
+  (e: 'change', value: Value[]): void
+}>()
+
+const _value = computed(() => {
+  return props.modelValue !== undefined
+    ? props.modelValue
+    : props.value !== undefined ? props.value : []
+})
 
-function isChecked(value: unknown): boolean {
-  return props.modelValue.includes(value)
+function isChecked(value: Value): boolean {
+  return _value.value.includes(value)
 }
 
-function handleChange(value: unknown): void {
-  const distinct = props.modelValue
+function handleChange(value: Value): void {
+  const distinct = _value.value
     .filter((v) => v !== value)
-    .concat(props.modelValue.includes(value) ? [] : [value])
+    .concat(_value.value.includes(value) ? [] : [value])
 
-  emit('update:modelValue', distinct)
+  if (distinct.length === 0 && !props.nullable) {
+    return
+  }
+
+  emit('update:model-value', distinct)
+  emit('change', distinct)
 }
 </script>
 
 <template>
   <SInputBase
     class="SInputCheckboxes"
-    :class="[size]"
+    :class="[size ?? 'small']"
     :name="name"
     :label="label"
     :note="note"
@@ -56,7 +79,7 @@ function handleChange(value: unknown): void {
   >
     <div class="container">
       <div class="row">
-        <div v-for="option in options" :key="option.value" class="col">
+        <div v-for="option in options" :key="String(option.value)" class="col">
           <SInputCheckbox
             :text="option.label"
             :model-value="isChecked(option.value)"
@@ -68,17 +91,3 @@ function handleChange(value: unknown): void {
     <template v-if="$slots.info" #info><slot name="info" /></template>
   </SInputBase>
 </template>
-
-<style lang="postcss" scoped>
-.container {
-  display: flex;
-}
-
-.row {
-  margin: -2px -8px;
-}
-
-.col {
-  padding: 2px 8px;
-}
-</style>

package/lib/components/SInputFile.vue

@@ -111,7 +111,7 @@ function onChange(e: Event) {
   .placeholder {
     line-height: 30px;
     font-size: var(--input-font-size, var(--input-mini-font-size));
-    font-weight: 500;
+    font-weight: 400;
   }
 }
 
@@ -123,7 +123,7 @@ function onChange(e: Event) {
   .button {
     padding: 0 8px;
     line-height: 26px;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
   }
 
@@ -133,10 +133,6 @@ function onChange(e: Event) {
     font-size: var(--input-font-size, var(--input-small-font-size));
     font-weight: 400;
   }
-
-  .placeholder {
-    font-weight: 500;
-  }
 }
 
 .SInputFile.medium {
@@ -157,10 +153,6 @@ function onChange(e: Event) {
     font-size: var(--input-font-size, var(--input-medium-font-size));
     font-weight: 400;
   }
-
-  .placeholder {
-    font-weight: 500;
-  }
 }
 
 .SInputFile.has-error {

package/lib/components/SInputRadio.vue

@@ -112,7 +112,7 @@ function onClick() {
   align-items: center;
   border-radius: 50%;
   width: 100%;
-  background-color: var(--c-info-bg);
+  background-color: var(--c-info-light);
   opacity: 0;
   transform: scale(0);
   transition: opacity 0.25s, transform 0.1s;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "packageManager": "pnpm@7.26.2",
   "description": "Vue Components for Global Brain Design System.",
   "author": "Kia Ishii <ka.ishii@globalbrains.com>",