@globalbrain/sefirot 3.35.2 → 3.36.0

package/lib/components/SInputDropdown.vue

@@ -164,6 +164,7 @@ function handleArray(value: OptionValue) {
           <SInputDropdownItem
             v-if="hasSelected"
             :items="selected"
+            :size="size ?? 'small'"
             :removable="removable"
             :disabled="disabled ?? false"
             @remove="handleSelect"
@@ -187,13 +188,72 @@ function handleArray(value: OptionValue) {
 </template>
 
 <style scoped lang="postcss">
+.container {
+  position: relative;
+}
+
+.box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--input-border-color);
+  border-radius: 6px;
+  width: 100%;
+  color: var(--input-text);
+  background-color: var(--input-bg-color);;
+  cursor: pointer;
+  transition: border-color 0.25s, background-color 0.25s;
+
+  &:hover {
+    border-color: var(--input-hover-border-color);
+  }
+}
+
+.box-content {
+  display: flex;
+  align-items: center;
+}
+
+.box-placeholder {
+  line-height: 24px;
+  color: var(--input-placeholder-color);
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.box-icon {
+  position: absolute;
+  z-index: 10;
+  cursor: pointer;
+}
+
+.box-icon-svg {
+  display: block;
+  width: 14px;
+  height: 14px;
+  color: var(--c-text-2);
+}
+
+.box-icon-svg.up {
+  margin-bottom: -4px;
+}
+
+.dropdown {
+  position: absolute;
+  left: 0;
+  z-index: var(--z-index-dropdown);
+
+  &.top    { bottom: calc(100% + 8px); }
+  &.bottom { top: calc(100% + 8px); }
+}
+
 .SInputDropdown.mini {
   .box {
     min-height: 32px;
   }
 
   .box-content {
-    padding: 3px 30px 3px 12px;
+    padding: 3px 30px 3px 8px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-mini-font-size));
   }
@@ -210,7 +270,7 @@ function handleArray(value: OptionValue) {
   }
 
   .box-content {
-    padding: 5px 30px 5px 8px;
+    padding: 5px 30px 5px 12px;
     line-height: 24px;
     font-size: var(--input-font-size, var(--input-small-font-size));
   }
@@ -258,56 +318,4 @@ function handleArray(value: OptionValue) {
     border-color: var(--input-error-border-color);
   }
 }
-
-.container {
-  position: relative;
-}
-
-.box {
-  position: relative;
-  border: 1px solid var(--input-border-color);
-  border-radius: 6px;
-  width: 100%;
-  color: var(--input-text);
-  background-color: var(--input-bg-color);;
-  cursor: pointer;
-  transition: border-color 0.25s, background-color 0.25s;
-
-  &:hover {
-    border-color: var(--input-hover-border-color);
-  }
-}
-
-.box-placeholder {
-  padding: 2px 4px;
-  color: var(--input-placeholder-color);
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.box-icon {
-  position: absolute;
-  z-index: 10;
-  cursor: pointer;
-}
-
-.box-icon-svg {
-  display: block;
-  width: 14px;
-  height: 14px;
-  color: var(--c-text-2);
-}
-
-.box-icon-svg.up {
-  margin-bottom: -4px;
-}
-
-.dropdown {
-  position: absolute;
-  left: 0;
-  z-index: var(--z-index-dropdown);
-
-  &.top    { bottom: calc(100% + 8px); }
-  &.bottom { top: calc(100% + 8px); }
-}
 </style>

package/lib/components/SInputDropdownItem.vue

@@ -20,8 +20,11 @@ export interface ItemAvatar extends ItemBase {
   image?: string | null
 }
 
+export type Size = 'mini' | 'small' | 'medium'
+
 defineProps<{
   items: Item[]
+  size: Size
   removable: boolean
   disabled: boolean
 }>()
@@ -36,6 +39,7 @@ defineEmits<{
     <div v-for="(item, index) in items" :key="index" class="item">
       <SInputDropdownItemText
         v-if="item.type === 'text' || item.type === undefined"
+        :size="size"
         :label="item.label"
         :value="item.value"
         :removable="removable"
@@ -44,6 +48,7 @@ defineEmits<{
       />
       <SInputDropdownItemAvatar
         v-if="item.type === 'avatar'"
+        :size="size"
         :label="item.label"
         :image="item.image"
         :value="item.value"

package/lib/components/SInputDropdownItemAvatar.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import IconX from '@iconify-icons/ph/x'
+import IconX from '@iconify-icons/ph/x-bold'
 import SAvatar from './SAvatar.vue'
 import SIcon from './SIcon.vue'
 
+export type Size = 'mini' | 'small' | 'medium'
+
 defineProps<{
+  size: Size
   label: string
   image?: string | null
   value: any
@@ -14,13 +17,19 @@ defineProps<{
 defineEmits<{
   (e: 'remove', value: any): void
 }>()
+
+const avatarSizeDict = {
+  mini: 'nano',
+  small: 'mini',
+  medium: 'mini'
+} as const
 </script>
 
 <template>
-  <div class="SInputDropdownItemAvatar" :class="{ disabled, removable }">
+  <div class="SInputDropdownItemAvatar" :class="[size, { disabled, removable }]">
     <div class="user">
       <div class="avatar">
-        <SAvatar size="nano" :avatar="image" :name="label" />
+        <SAvatar :size="avatarSizeDict[size]" :avatar="image" :name="label" />
       </div>
       <p class="name">{{ label }}</p>
     </div>
@@ -36,31 +45,22 @@ defineEmits<{
 <style lang="postcss" scoped>
 .SInputDropdownItemAvatar {
   display: flex;
+  align-items: center;
   border: 1px solid var(--c-border-mute-1);
-  border-radius: 14px;
-  padding: 0 12px 0 0;
   background-color: var(--c-bg-mute-1);
 }
 
-.SInputDropdownItemAvatar.removable {
-  padding: 0;
-}
-
-.SInputDropdownItemUserAvatar.disabled {
-  padding: 0 10px 0 0;
-}
-
 .user {
   display: flex;
+  align-items: center;
 }
 
 .avatar {
-  padding: 3px 0 0 3px;
+  display: flex;
+  align-items: center;
 }
 
 .name {
-  margin: 0 0 0 8px;
-  line-height: 26px;
   font-size: 12px;
   font-weight: 500;
   white-space: nowrap;
@@ -70,9 +70,6 @@ defineEmits<{
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-left: 2px;
-  width: 26px;
-  height: 26px;
 }
 
 .remove-box {
@@ -80,8 +77,6 @@ defineEmits<{
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  width: 20px;
-  height: 20px;
   color: var(--c-text-2);
   transition: color 0.25s, background-color 0.25s;
 
@@ -91,8 +86,91 @@ defineEmits<{
   }
 }
 
-.remove-icon {
-  width: 12px;
-  height: 12px;
+.SInputDropdownItemAvatar.mini {
+  gap: 2px;
+  border-radius: 12px;
+  padding: 0 8px 0 0;
+  height: 24px;
+
+  .avatar {
+    padding: 0 0 0 1px;
+  }
+
+  .name {
+    margin-left: 6px;
+  }
+
+  .remove {
+    width: 23px;
+    height: 23px;
+  }
+
+  .remove-box {
+    width: 20px;
+    height: 20px;
+  }
+
+  .remove-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.SInputDropdownItemAvatar.small {
+  border-radius: 14px;
+  padding: 0 12px 0 0;
+  height: 28px;
+
+  .avatar {
+    padding: 0 0 0 1px;
+  }
+
+  .name {
+    margin-left: 6px;
+  }
+
+  .remove {
+    width: 26px;
+    height: 26px;
+  }
+
+  .remove-box {
+    width: 20px;
+    height: 20px;
+  }
+
+  .remove-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.SInputDropdownItemAvatar.medium {
+  border-radius: 16px;
+  padding: 0 12px 0 0;
+  height: 32px;
+
+  .avatar {
+    padding: 0 0 0 4px;
+  }
+
+  .name {
+    margin-left: 6px;
+  }
+
+  .remove {
+    width: 26px;
+    height: 26px;
+  }
+
+  .remove-box {
+    width: 20px;
+    height: 20px;
+  }
+
+  .remove-icon {
+    width: 12px;
+    height: 12px;
+  }
 }
 </style>

package/lib/components/SInputDropdownItemText.vue

@@ -2,7 +2,10 @@
 import IconX from '@iconify-icons/ph/x-bold'
 import SIcon from './SIcon.vue'
 
+export type Size = 'mini' | 'small' | 'medium'
+
 defineProps<{
+  size: Size
   label: string
   value: any
   removable: boolean
@@ -15,7 +18,7 @@ defineEmits<{
 </script>
 
 <template>
-  <div class="SInputDropdownItemText" :class="{ disabled, removable }">
+  <div class="SInputDropdownItemText" :class="[size, { disabled, removable }]">
     <p class="text">{{ label }}</p>
 
     <div v-if="!disabled && removable" class="remove" role="button" @click.stop="$emit('remove', value)">
@@ -29,23 +32,14 @@ defineEmits<{
 <style lang="postcss" scoped>
 .SInputDropdownItemText {
   display: flex;
+  align-items: center;
   border: 1px solid var(--c-border-mute-1);
-  border-radius: 14px;
-  padding: 0 12px;
   background-color: var(--c-bg-mute-1);
 }
 
-.SInputDropdownItemText.removable {
-  padding: 0 0 0 12px;
-}
-
-.SInputDropdownItemText.disabled {
-  padding: 0 10px;
-}
-
 .text {
   margin: 0;
-  line-height: 26px;
+  line-height: 20px;
   font-size: 12px;
   font-weight: 500;
   white-space: nowrap;
@@ -55,8 +49,6 @@ defineEmits<{
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 26px;
-  height: 26px;
 }
 
 .remove-box {
@@ -64,19 +56,100 @@ defineEmits<{
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  width: 20px;
-  height: 20px;
   color: var(--c-text-2);
   transition: color 0.25s, background-color 0.25s;
 
   .remove:hover & {
     color: var(--c-text-1);
-    background-color: var(--c-bg-mute-2);
+    background-color: var(--c-bg-mute-3);
   }
 }
 
-.remove-icon {
-  width: 12px;
-  height: 12px;
+.SInputDropdownItemText.mini {
+  gap: 2px;
+  border-radius: 12px;
+  padding: 0 8px;
+  height: 24px;
+
+  &.removable {
+    padding: 0 0 0 8px;
+  }
+
+  &.disabled {
+    padding: 0 10px;
+  }
+
+  .remove {
+    width: 23px;
+    height: 23px;
+  }
+
+  .remove-box {
+    width: 20px;
+    height: 20px;
+  }
+
+  .remove-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.SInputDropdownItemText.small {
+  border-radius: 14px;
+  padding: 0 12px;
+  height: 28px;
+
+  &.removable {
+    padding: 0 0 0 12px;
+  }
+
+  &.disabled {
+    padding: 0 12px;
+  }
+
+  .remove {
+    width: 26px;
+    height: 26px;
+  }
+
+  .remove-box {
+    width: 20px;
+    height: 20px;
+  }
+
+  .remove-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.SInputDropdownItemText.medium {
+  border-radius: 16px;
+  padding: 0 12px;
+  height: 32px;
+
+  &.removable {
+    padding: 0 0 0 12px;
+  }
+
+  &.disabled {
+    padding: 0 12px;
+  }
+
+  .remove {
+    width: 26px;
+    height: 26px;
+  }
+
+  .remove-box {
+    width: 20px;
+    height: 20px;
+  }
+
+  .remove-icon {
+    width: 12px;
+    height: 12px;
+  }
 }
 </style>

package/lib/validation/rules/index.ts

@@ -19,6 +19,7 @@ export { requiredHms } from './requiredHms'
 export { requiredIf } from './requiredIf'
 export { requiredYmd } from './requiredYmd'
 export { rule } from './rule'
+export { slackChannelName } from './slackChannelName'
 export { url } from './url'
 export { ymd } from './ymd'
 export { zeroOrNegativeInteger } from './zeroOrNegativeInteger'

package/lib/validation/rules/slackChannelName.ts

@@ -0,0 +1,15 @@
+import { createRule } from '../Rule'
+import { type SlackChannelNameOptions, slackChannelName as baseSlackChannelName } from '../validators'
+
+export const message = {
+  en: 'The slack channel name is invalid.',
+  ja: 'Slackチャンネル名の形式が正しくありません。'
+}
+
+export function slackChannelName(options?: SlackChannelNameOptions, msg?: string) {
+  return createRule({
+    message: ({ lang }) => msg ?? message[lang],
+    optional: true,
+    validation: (value) => baseSlackChannelName(value, options)
+  })
+}

package/lib/validation/validators/index.ts

@@ -17,6 +17,7 @@ export * from './required'
 export * from './requiredHms'
 export * from './requiredIf'
 export * from './requiredYmd'
+export * from './slackChannelName'
 export * from './url'
 export * from './ymd'
 export * from './zero'

package/lib/validation/validators/slackChannelName.ts

@@ -0,0 +1,16 @@
+import { isString } from '../../support/Utils'
+
+export interface SlackChannelNameOptions {
+  offset?: number
+}
+
+export function slackChannelName(value: unknown, options: SlackChannelNameOptions = {}): boolean {
+  if (!isString(value)) {
+    return false
+  }
+
+  const { offset = 0 } = options
+  const maxLength = /* Slack channel name max length */ 80 - offset
+
+  return new RegExp(`^[\\p{L}\\p{M}\\p{N}_-]{1,${maxLength}}$`, 'u').test(value)
+}

package/package.json

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