@globalbrain/sefirot 2.2.1 → 2.3.0

package/lib/components/SInputSwitch.vue

@@ -1,3 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+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
+  text?: string
+  help?: string
+  disabled?: boolean
+  modelValue: boolean
+  hideError?: boolean
+  validation?: Validatable
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const classes = computed(() => [
+  [props.size ?? 'small'],
+  { disabled: props.disabled }
+])
+
+function emitChange(): void {
+  !props.disabled && emit('update:modelValue', !props.modelValue)
+}
+</script>
+
 <template>
   <SInputBase
     class="SInputSwitch"
@@ -6,188 +40,80 @@
     :label="label"
     :note="note"
     :help="help"
+    :hide-error="hideError"
   >
-    <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="container">
+      <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
+        <p v-if="text" class="text">{{ text }}</p>
 
-        <div class="SInputSwitch-box">
-          <div class="SInputSwitch-check" />
+        <div class="box">
+          <div class="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 {
+.container {
   display: flex;
 }
 
-.SInputSwitch-input {
+.input {
   position: relative;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   width: 100%;
+  height: 32px;
 
   &:hover {
-    .SInputSwitch-box   { border-color: var(--c-black); }
-    .SInputSwitch-check { background-color: var(--c-black); }
+    .box { border-color: var(--c-info); }
   }
 }
 
-.SInputSwitch-input.on .SInputSwitch-check {
+.input.on .box {
+  border-color: var(--c-info-lighter);
+  background-color: var(--c-info);
+}
+
+.input.on .check {
   background-color: var(--c-white);
   transform: translateX(18px);
 }
 
-.SInputSwitch-text {
+.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 {
+.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;
+  border: 1px solid var(--c-divider);
+  border-radius: 11px;
+  width: 40px;
+  height: 22px;
+  background-color: var(--c-bg-elv-down);
+  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
 }
 
-.SInputSwitch-check {
+.check {
   position: absolute;
   border-radius: 50%;
   background-color: var(--c-black);
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
   transition: background-color .25s, transform .25s;
+
+  .dark & {
+    background-color: var(--c-white);
+  }
 }
 </style>

package/lib/components/SInputSwitches.vue

@@ -1,88 +1,81 @@
-<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 { computed } from 'vue'
+import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputSwitch from './SInputSwitch.vue'
 
-type Size = 'mini' | 'small'
-type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+export type Size = 'mini' | 'small' | 'medium'
 
-
-interface Option {
+export interface Option {
   label: string
-  value: any
+  value: string | number | boolean
 }
 
-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 props = defineProps<{
+  size?: Size
+  name?: string
+  label?: string
+  note?: string
+  help?: string
+  options: Option[]
+  disabled?: boolean
+  modelValue: (string | number | boolean)[]
+  hideError?: boolean
+  validation?: Validatable
+}>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: (string | number | boolean)[]): void
+}>()
 
 const classes = computed(() => [
-  props.size,
-  props.mode
+  props.size ?? 'small'
 ])
 
-function isChecked(value: unknown): boolean {
+function isChecked(value: string | number | boolean): boolean {
   return props.modelValue.includes(value)
 }
 
-function handleChange(value: unknown): void {
+function handleChange(value: string | number | boolean): 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; }
-}
+<template>
+  <SInputBase
+    class="SInputSwitches"
+    :class="classes"
+    :name="name"
+    :label="label"
+    :note="note"
+    :help="help"
+    :hide-error="hideError"
+  >
+    <div class="container">
+      <div class="row">
+        <div v-for="(option, index) in options" :key="index" class="col">
+          <SInputSwitch
+            :size="size"
+            :text="option.label"
+            :model-value="isChecked(option.value)"
+            @update:model-value="handleChange(option.value)"
+          />
+        </div>
+      </div>
+    </div>
+  </SInputBase>
+</template>
 
-.SInputSwitches-container {
+<style lang="postcss" scoped>
+.container {
   display: flex;
 }
 
-.SInputSwitches-row {
+.row {
   width: 100%;
 }
 </style>

package/lib/components/SInputText.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SIcon from './SIcon.vue'
 import SInputBase from './SInputBase.vue'

package/lib/components/SInputTextarea.vue

@@ -1,27 +1,3 @@
-<template>
-  <SInputBase
-    class="SInputTextarea"
-    :class="classes"
-    :name="name"
-    :label="label"
-    :note="note"
-    :help="help"
-    :hide-error="hideError"
-    :validation="validation"
-  >
-    <textarea
-      :id="name"
-      class="input"
-      :placeholder="placeholder"
-      :rows="rows ?? 3"
-      :disabled="disabled"
-      :value="modelValue ?? ''"
-      @input="emitInput"
-      @blur="emitBlur"
-    />
-  </SInputBase>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Validatable } from '../composables/Validation'
@@ -62,6 +38,30 @@ function emitBlur(e: FocusEvent): void {
 }
 </script>
 
+<template>
+  <SInputBase
+    class="SInputTextarea"
+    :class="classes"
+    :name="name"
+    :label="label"
+    :note="note"
+    :help="help"
+    :hide-error="hideError"
+    :validation="validation"
+  >
+    <textarea
+      :id="name"
+      class="input"
+      :placeholder="placeholder"
+      :rows="rows ?? 3"
+      :disabled="disabled"
+      :value="modelValue ?? ''"
+      @input="emitInput"
+      @blur="emitBlur"
+    />
+  </SInputBase>
+</template>
+
 <style lang="postcss" scoped>
 .SInputTextarea.mini {
   .input {

package/lib/components/SLink.vue

@@ -1,17 +1,3 @@
-<template>
-  <component
-    :is="component"
-    class="SLink"
-    :class="{ link: href }"
-    :href="href"
-    :to="href"
-    :target="target"
-    :rel="rel"
-  >
-    <slot />
-  </component>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue'
 
@@ -34,3 +20,17 @@ const component = computed(() => {
 const target = computed(() => isExternal.value ? '_blank' : null)
 const rel = computed(() => isExternal.value ? 'noopener noreferrer' : null)
 </script>
+
+<template>
+  <component
+    :is="component"
+    class="SLink"
+    :class="{ link: href }"
+    :href="href"
+    :to="href"
+    :target="target"
+    :rel="rel"
+  >
+    <slot />
+  </component>
+</template>

package/lib/components/SMarkdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
-import { LinkCallback, LinkSubscriberPayload, useMarkdown, useLink } from '../composables/Markdown'
+import { computed, nextTick, ref, watch } from 'vue'
+import { LinkCallback, LinkSubscriberPayload, useLink, useMarkdown } from '../composables/Markdown'
 
 const props = defineProps<{
   tag?: string
@@ -29,7 +29,7 @@ watch(
   { immediate: true }
 )
 
-subscribe((payload) => emit('clicked', payload))
+subscribe(payload => emit('clicked', payload))
 </script>
 
 <template>

package/lib/components/SMount.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 
 defineProps<{
   tag?: string

package/lib/components/SSheetFooterAction.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SButton, { Type, Mode } from './SButton.vue'
+import SButton, { Mode, Type } from './SButton.vue'
 
 defineProps<{
   type?: Type

package/lib/components/SSpinner.vue

@@ -1,5 +1,10 @@
 <template>
-  <svg class="SSpinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+  <svg
+    class="SSpinner"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    preserveAspectRatio="xMidYMid"
+  >
     <g transform="rotate(0 50 50)">
       <rect
         class="bar"
@@ -19,7 +24,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(30 50 50)">
+    </g>
+    <g transform="rotate(30 50 50)">
       <rect
         class="bar"
         x="48"
@@ -38,7 +44,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(60 50 50)">
+    </g>
+    <g transform="rotate(60 50 50)">
       <rect
         class="bar"
         x="48"
@@ -57,7 +64,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(90 50 50)">
+    </g>
+    <g transform="rotate(90 50 50)">
       <rect
         class="bar"
         x="48"
@@ -76,7 +84,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(120 50 50)">
+    </g>
+    <g transform="rotate(120 50 50)">
       <rect
         class="bar"
         x="48"
@@ -95,7 +104,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(150 50 50)">
+    </g>
+    <g transform="rotate(150 50 50)">
       <rect
         class="bar"
         x="48"
@@ -114,7 +124,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(180 50 50)">
+    </g>
+    <g transform="rotate(180 50 50)">
       <rect
         class="bar"
         x="48"
@@ -133,7 +144,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(210 50 50)">
+    </g>
+    <g transform="rotate(210 50 50)">
       <rect
         class="bar"
         x="48"
@@ -152,7 +164,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(240 50 50)">
+    </g>
+    <g transform="rotate(240 50 50)">
       <rect
         class="bar"
         x="48"
@@ -171,7 +184,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(270 50 50)">
+    </g>
+    <g transform="rotate(270 50 50)">
       <rect
         class="bar"
         x="48"
@@ -190,7 +204,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(300 50 50)">
+    </g>
+    <g transform="rotate(300 50 50)">
       <rect
         class="bar"
         x="48"
@@ -209,7 +224,8 @@
           repeatCount="indefinite"
         />
       </rect>
-    </g><g transform="rotate(330 50 50)">
+    </g>
+    <g transform="rotate(330 50 50)">
       <rect
         class="bar"
         x="48"

package/lib/components/SStep.vue

@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import IconCheck from '@iconify-icons/ph/check'
+import IconX from '@iconify-icons/ph/x'
+import { PropType } from 'vue'
+import { BarMode, StepStatus } from '../composables/Step'
+import SIcon from './SIcon.vue'
+
+defineProps({
+  status: { type: String as PropType<StepStatus>, required: true },
+  barLeft: { type: String as PropType<BarMode | null>, default: null },
+  barRight: { type: String as PropType<BarMode | null>, default: null },
+  text: { type: String, default: null }
+})
+</script>
+
 <template>
   <div class="SStep" :class="[status]">
     <div class="indicator">
@@ -14,21 +29,6 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import IconCheck from '@iconify-icons/ph/check'
-import IconX from '@iconify-icons/ph/x'
-import { PropType } from 'vue'
-import { StepStatus, BarMode } from '../composables/Step'
-import SIcon from './SIcon.vue'
-
-defineProps({
-  status: { type: String as PropType<StepStatus>, required: true },
-  barLeft: { type: String as PropType<BarMode | null>, default: null },
-  barRight: { type: String as PropType<BarMode | null>, default: null },
-  text: { type: String, default: null }
-})
-</script>
-
 <style lang="postcss" scoped>
 .SStep.upcoming {
   .point { border-color: var(--c-divider); }