@globalbrain/sefirot 2.0.0-draft.8 → 2.1.0

package/lib/components/SInputRadio.vue

@@ -1,11 +1,38 @@
+<script setup lang="ts">
+import { Validatable } from '../composables/Validation'
+import SInputBase from './SInputBase.vue'
+
+export type Size = 'mini' | 'small' | 'medium'
+
+const props = defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  note?: string
+  help?: string
+  text: string
+  hideError?: boolean
+  modelValue: boolean
+  validation?: Validatable
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+function emitChange() {
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
 <template>
   <SInputBase
     class="SInputRadio"
-    :class="[size]"
+    :class="[size ?? 'small']"
     :label="label"
     :note="note"
     :help="help"
-    :error-message="errorMessage"
+    :hide-error="hideError"
     :validation="validation"
   >
     <div class="container">
@@ -20,31 +47,6 @@
   </SInputBase>
 </template>
 
-<script setup lang="ts">
-import { PropType } from 'vue'
-import { Validation } from '../composables/Validation'
-import SInputBase from './SInputBase.vue'
-
-type Size = 'mini' | 'small' | 'medium'
-
-const props = defineProps({
-  size: { type: String as PropType<Size>, default: 'small' },
-  label: { type: String, default: null },
-  note: { type: String, default: null },
-  help: { type: String, default: null },
-  text: { type: String, required: true },
-  errorMessage: { type: Boolean, default: true },
-  modelValue: { type: Boolean, required: true },
-  validation: { type: Object as PropType<Validation>, default: null }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-function emitChange() {
-  emit('update:modelValue', !props.modelValue)
-}
-</script>
-
 <style lang="postcss" scoped>
 .container {
   display: flex;
@@ -58,14 +60,14 @@ function emitChange() {
 
   &:hover {
     .box {
-      border-color: var(--c-text-1);
+      border-color: var(--c-info);
     }
   }
 }
 
 .input.on {
   .box {
-    border-color: var(--c-text-1);
+    border-color: var(--c-info);
     box-shadow: var(--shadow-depth-3);
   }
 
@@ -77,11 +79,12 @@ function emitChange() {
 
 .box {
   position: relative;
-  border: 2px solid var(--c-text-3);
+  border: 1px solid var(--c-divider);
   border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  transition: border-color .25s, box-shadow .25s;
+  width: 16px;
+  height: 16px;
+  background-color: var(--c-bg);
+  transition: border-color 0.25s, box-shadow 0.25s;
 }
 
 .check {
@@ -95,15 +98,15 @@ function emitChange() {
   align-items: center;
   border-radius: 50%;
   width: 100%;
-  background-color: var(--c-text-1);
+  background-color: var(--c-info);
   opacity: 0;
   transform: scale(0);
-  transition: opacity .25s, transform .1s;
+  transition: opacity 0.25s, transform 0.1s;
 }
 
 .text {
   margin: 0;
-  padding-left: 12px;
+  padding-left: 10px;
   line-height: 20px;
   font-size: 14px;
   font-weight: 500;

package/lib/components/SInputRadios.vue

@@ -1,54 +1,31 @@
-<template>
-  <SInputBase
-    class="SInputRadios"
-    :class="[size]"
-    :label="label"
-    :note="note"
-    :help="help"
-    :error-message="errorMessage"
-    :validation="validation"
-  >
-    <div class="container">
-      <div class="row">
-        <div v-for="(option, index) in options" :key="index" class="col">
-          <SInputRadio
-            :text="option.label"
-            :model-value="isChecked(option.value)"
-            @update:model-value="handleChange(option.value)"
-          />
-        </div>
-      </div>
-    </div>
-  </SInputBase>
-</template>
-
 <script setup lang="ts">
-import { PropType } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 
-type Size = 'mini' | 'small' | 'medium'
+export type Size = 'mini' | 'small' | 'medium'
 
-interface Option {
+export interface Option {
   label: string
   value: string | number | boolean
 }
 
-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 },
-  nullable: { type: Boolean, default: true },
-  options: { type: Array as PropType<any[]>, required: true },
-  errorMessage: { type: Boolean, default: true },
-  modelValue: { type: [String, Number, Boolean], default: null },
-  validation: { type: Object as PropType<Validatable>, default: null }
-})
+const props = defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  note?: string
+  help?: string
+  nullable?: boolean
+  options: Option[]
+  hideError?: boolean
+  modelValue: string | number | boolean | null
+  validation?: Validatable
+}>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | boolean | null): void
+}>()
 
 function isChecked(value: string | number | boolean) {
   return value === props.modelValue
@@ -67,16 +44,26 @@ function handleChange(value: string | number | boolean) {
 }
 </script>
 
-<style lang="postcss" scoped>
-.container {
-  display: flex;
-}
-
-.row {
-  margin: -2px -8px;
-}
-
-.col {
-  padding: 2px 8px;
-}
-</style>
+<template>
+  <SInputBase
+    class="SInputRadios"
+    :class="[size ?? 'small']"
+    :label="label"
+    :note="note"
+    :help="help"
+    :hide-error="hideError"
+    :validation="validation"
+  >
+    <div class="container">
+      <div class="row">
+        <div v-for="(option, index) in options" :key="index" class="col">
+          <SInputRadio
+            :text="option.label"
+            :model-value="isChecked(option.value)"
+            @update:model-value="handleChange(option.value)"
+          />
+        </div>
+      </div>
+    </div>
+  </SInputBase>
+</template>

package/lib/components/SInputSelect.vue

@@ -38,18 +38,19 @@
       </select>
 
       <div class="icon" role="button">
-        <SIconChevronUp class="icon-svg up" />
-        <SIconChevronDown class="icon-svg down" />
+        <SIcon :icon="IconCaretUp" class="icon-svg up" />
+        <SIcon :icon="IconCaretDown" class="icon-svg down" />
       </div>
     </div>
   </SInputBase>
 </template>
 
 <script setup lang="ts">
+import IconCaretDown from '@iconify-icons/ph/caret-down'
+import IconCaretUp from '@iconify-icons/ph/caret-up'
 import { PropType, ref, computed } from 'vue'
-import { Validation, Validatable } from '../composables/Validation'
-import SIconChevronUp from './icons/SIconChevronUp.vue'
-import SIconChevronDown from './icons/SIconChevronDown.vue'
+import { Validatable } from '../composables/Validation'
+import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'
 
 type Size = 'mini' | 'small' | 'medium'
@@ -226,7 +227,7 @@ function emitChange(e: any): void {
   display: block;
   width: 14px;
   height: 14px;
-  fill: var(--input-placeholder);
+  color: var(--input-placeholder);
 }
 
 .icon-svg.up {

package/lib/components/SInputSwitch.vue

@@ -0,0 +1,193 @@
+<template>
+  <SInputBase
+    class="SInputSwitch"
+    :class="classes"
+    :name="name"
+    :label="label"
+    :note="note"
+    :help="help"
+  >
+    <div class="SInputSwitch-container">
+      <div class="SInputSwitch-input" :class="{ on: modelValue }" role="button" @click="emitChange">
+        <p v-if="text" class="SInputSwitch-text" :class="[textMode]">{{ text }}</p>
+
+        <div class="SInputSwitch-box">
+          <div class="SInputSwitch-check" />
+        </div>
+
+        <p v-if="textAfter" class="SInputSwitch-text after" :class="[textMode]">{{ textAfter }}</p>
+      </div>
+    </div>
+  </SInputBase>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+import SInputBase from './SInputBase.vue'
+
+type Size = 'mini' | 'small'
+type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+type TextMode = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps({
+  size: { type: String as PropType<Size>, default: 'small' },
+  mode: { type: String as PropType<Mode>, default: 'neutral' },
+  name: { type: String, default: null },
+  label: { type: String, default: null },
+  note: { type: String, default: null },
+  text: { type: String, default: null },
+  textAfter: { type: String, default: null },
+  textMode: { type: String as PropType<TextMode>, default: 'neutral' },
+  disabled: { type: Boolean, default: false },
+  help: { type: String, default: null },
+  modelValue: { type: Boolean, required: true }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const classes = computed(() => ({
+  mini: props.size === 'mini',
+  small: props.size === 'small',
+  neutral: props.mode === 'neutral',
+  info: props.mode === 'info',
+  success: props.mode === 'success',
+  warning: props.mode === 'warning',
+  danger: props.mode === 'danger',
+  disabled: props.disabled
+}))
+
+function emitChange(): void {
+  !props.disabled && emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<style lang="postcss" scoped>
+.SInputSwitch.mini {
+  .SInputSwitch-box {
+    margin: 1px 0 0;
+    border-radius: 9px;
+    width: 36px;
+    height: 18px;
+  }
+
+  .SInputSwitch-check {
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    transition: background-color .25s, transform .25s;
+  }
+}
+
+.SInputSwitch.small {
+  .SInputSwitch-box {
+    margin: -1px 0 -1px;
+    border-radius: 11px;
+    width: 40px;
+    height: 22px;
+  }
+
+  .SInputSwitch-check {
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    transition: background-color .25s, transform .25s;
+  }
+}
+
+.SInputSwitch.neutral .SInputSwitch-input.on .SInputSwitch-box {
+  border-color: var(--c-black);
+  background-color: var(--c-black);
+}
+
+.SInputSwitch.info .SInputSwitch-input.on .SInputSwitch-box {
+  border-color: var(--c-info);
+  background-color: var(--c-info);
+}
+
+.SInputSwitch.success .SInputSwitch-input.on .SInputSwitch-box {
+  border-color: var(--c-success);
+  background-color: var(--c-success);
+}
+
+.SInputSwitch.warning .SInputSwitch-input.on .SInputSwitch-box {
+  border-color: var(--c-warning);
+  background-color: var(--c-warning);
+}
+
+.SInputSwitch.danger .SInputSwitch-input.on .SInputSwitch-box {
+  border-color: var(--c-danger);
+  background-color: var(--c-danger);
+}
+
+.SInputSwitch.disabled .SInputSwitch-input {
+  .SInputSwitch-box {
+    cursor: not-allowed;
+    opacity: .6;
+  }
+
+  &:hover .SInputSwitch-box { border-color: var(--c-gray); }
+}
+
+.SInputSwitch.disabled .SInputSwitch-input.on {
+  &:hover .SInputSwitch-box { border-color: transparent; }
+}
+
+.SInputSwitch-container {
+  display: flex;
+}
+
+.SInputSwitch-input {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  &:hover {
+    .SInputSwitch-box   { border-color: var(--c-black); }
+    .SInputSwitch-check { background-color: var(--c-black); }
+  }
+}
+
+.SInputSwitch-input.on .SInputSwitch-check {
+  background-color: var(--c-white);
+  transform: translateX(18px);
+}
+
+.SInputSwitch-text {
+  flex-grow: 1;
+  margin: 0;
+  padding-right: 16px;
+  line-height: 20px;
+  font-size: 14px;
+}
+
+.SInputSwitch-text.mute {
+  color: var(--c-text-light-2);
+  font-weight: 500;
+}
+
+.SInputSwitch-text.info    { color: var(--c-info); }
+.SInputSwitch-text.success { color: var(--c-success); }
+.SInputSwitch-text.warning { color: var(--c-warning); }
+.SInputSwitch-text.danger  { color: var(--c-danger); }
+.SInputSwitch-text.after {
+  padding-left: 12px;
+}
+
+.SInputSwitch-box {
+  position: relative;
+  flex-shrink: 0;
+  border: 1px solid var(--c-gray);
+  background-color: var(--c-white-mute);
+  transition: border-color .25s, background-color .25s, box-shadow .25s;
+}
+
+.SInputSwitch-check {
+  position: absolute;
+  border-radius: 50%;
+  background-color: var(--c-black);
+  transition: background-color .25s, transform .25s;
+}
+</style>

package/lib/components/SInputSwitches.vue

@@ -0,0 +1,88 @@
+<template>
+  <SInputBase
+    class="SInputSwitches"
+    :class="classes"
+    :name="name"
+    :label="label"
+    :note="note"
+    :help="help"
+  >
+    <div class="SInputSwitches-container">
+      <div class="SInputSwitches-row">
+        <div v-for="option in options" :key="option.value" class="SInputSwitches-col">
+          <SInputSwitch
+            :size="size"
+            :mode="mode"
+            :text="option.label"
+            :model-value="isChecked(option.value)"
+            @update:model-value="handleChange(option.value)"
+          />
+        </div>
+      </div>
+    </div>
+  </SInputBase>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+import SInputBase from './SInputBase.vue'
+import SInputSwitch from './SInputSwitch.vue'
+
+type Size = 'mini' | 'small'
+type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+
+interface Option {
+  label: string
+  value: any
+}
+
+const props = defineProps({
+  size: { type: String as PropType<Size>, default: 'small' },
+  mode: { type: String as PropType<Mode>, default: 'neutral' },
+  name: { type: String, default: null },
+  label: { type: String, default: null },
+  note: { type: String, default: null },
+  help: { type: String, default: null },
+  options: { type: Array as PropType<Option[]>, required: true },
+  modelValue: { type: Array as PropType<unknown[]>, required: true }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const classes = computed(() => [
+  props.size,
+  props.mode
+])
+
+function isChecked(value: unknown): boolean {
+  return props.modelValue.includes(value)
+}
+
+function handleChange(value: unknown): void {
+  const difference = props.modelValue
+    .filter(v => v !== value)
+    .concat(props.modelValue.includes(value) ? [] : [value])
+  emit('update:modelValue', difference)
+}
+</script>
+
+<style lang="postcss" scoped>
+.SInputSwitches.mini {
+  .SInputSwitches-row { margin: -2px -8px; }
+  .SInputSwitches-col { padding: 2px 8px; }
+}
+
+.SInputSwitches.small {
+  .SInputSwitches-row { margin: -4px -8px; }
+  .SInputSwitches-col { padding: 4px 8px; }
+}
+
+.SInputSwitches-container {
+  display: flex;
+}
+
+.SInputSwitches-row {
+  width: 100%;
+}
+</style>