@globalbrain/sefirot 2.0.0-draft.8 → 2.0.0

package/lib/components/SInputYMD.vue

@@ -1,89 +1,37 @@
-<template>
-  <SInputBase
-    class="SInputYMD"
-    :class="[size, { disabled }]"
-    :label="label"
-    :note="note"
-    :help="help"
-    :error-message="errorMessage"
-    :validation="validation"
-  >
-    <div class="container">
-      <input
-        v-if="year"
-        class="input year"
-        type="number"
-        :value="modelValue?.year"
-        placeholder="YYYY"
-        :disabled="disabled"
-        @blur="updateYear"
-      >
-      <div
-        v-if="year && month"
-        class="separator"
-      />
-      <input
-        v-if="month"
-        class="input month"
-        type="number"
-        :value="modelValue?.month"
-        placeholder="M"
-        :disabled="disabled"
-        @blur="updateMonth"
-      >
-      <div
-        v-if="month && date"
-        class="separator"
-      />
-      <input
-        v-if="date"
-        class="input date"
-        type="number"
-        :value="modelValue?.date"
-        placeholder="D"
-        :disabled="disabled"
-        @blur="updateDate"
-      >
-    </div>
-  </SInputBase>
-</template>
-
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { ref } from 'vue'
 import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
-type Size = 'mini' | 'small' | 'medium'
+export type Size = 'mini' | 'small' | 'medium'
 
-interface Value {
-  year?: number
-  month?: number
-  date?: number
+export interface Value {
+  year: number | null
+  month: number | null
+  date: number | null
 }
 
-type ValueType = 'year' | 'month' | 'date'
+export type ValueType = 'year' | 'month' | 'date'
 
-interface Fields {
-  year?: boolean
-  month?: boolean
-  date?: boolean
-}
+const props = defineProps<{
+  size?: Size
+  label?: string
+  note?: string
+  help?: string
+  noYear?: boolean
+  noMonth?: boolean
+  noDate?: boolean
+  disabled?: boolean
+  hideError?: boolean
+  modelValue: Value
+  validation?: Validatable
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Value): void
+}>()
 
-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 },
-  year: { type: Boolean, default: true },
-  month: { type: Boolean, default: true },
-  date: { type: Boolean, default: true },
-  disabled: { type: Boolean, default: false },
-  errorMessage: { type: Boolean, default: true },
-  modelValue: { type: Object as PropType<Value>, default: null },
-  validation: { type: Object as PropType<Validatable>, default: null }
-})
-
-const emit = defineEmits(['update:modelValue'])
+const isFocused = ref(false)
 
 const touched = {
   year: false,
@@ -91,40 +39,35 @@ const touched = {
   date: false
 }
 
-function updateYear(e: FocusEvent): void {
-  const value = Number((e.target as HTMLInputElement).value)
-  update('year', value === 0 ? undefined : value)
+function onFocus() {
+  isFocused.value = true
 }
 
-function updateMonth(e: FocusEvent): void {
-  const value = Number((e.target as HTMLInputElement).value)
-  update('month', value === 0 ? undefined : value)
+function blur() {
+  isFocused.value = false
 }
 
-function updateDate(e: FocusEvent): void {
-  const value = Number((e.target as HTMLInputElement).value)
-  update('date', value === 0 ? undefined : value)
+function updateYear(e: FocusEvent) {
+  update('year', Number((e.target as HTMLInputElement).value))
 }
 
-function update(type: ValueType, value?: number): void {
-  const data = { ...props.modelValue } as Value
+function updateMonth(e: FocusEvent) {
+  update('month', Number((e.target as HTMLInputElement).value))
+}
 
-  setValue(data, type, value)
+function updateDate(e: FocusEvent) {
+  update('date', Number((e.target as HTMLInputElement).value))
+}
 
-  data.year === undefined && data.month === undefined && data.date === undefined
-    ? emit('update:modelValue', null)
-    : emit('update:modelValue', data)
+function update(type: ValueType, value: number) {
+  emit('update:modelValue', {
+    ...props.modelValue,
+    [type]: value === 0 ? null : value
+  })
 
   emitTouch(type)
-}
 
-function setValue(data: Value, type: ValueType, value?: number): void {
-  if (value === undefined) {
-    delete data[type]
-    return
-  }
-
-  data[type] = value
+  blur()
 }
 
 function emitTouch(type: ValueType): void {
@@ -143,7 +86,7 @@ function createRequiredTouched(): boolean[] {
   const requiredTouched = [] as boolean[]
 
   for (const key in touched) {
-    if ((props as any)[key]) {
+    if (!(props as any)[`no${key.charAt(0).toUpperCase() + key.slice(1)}`]) {
       requiredTouched.push((touched as any)[key])
     }
   }
@@ -152,6 +95,59 @@ function createRequiredTouched(): boolean[] {
 }
 </script>
 
+<template>
+  <SInputBase
+    class="SInputYMD"
+    :class="[size, { disabled }]"
+    :label="label"
+    :note="note"
+    :help="help"
+    :hide-error="hideError"
+    :validation="validation"
+  >
+    <div class="container" :class="{ focus: isFocused }">
+      <input
+        v-if="!noYear"
+        class="input year"
+        type="number"
+        :value="modelValue.year"
+        placeholder="YYYY"
+        :disabled="disabled"
+        @focus="onFocus"
+        @blur="updateYear"
+      >
+      <div
+        v-if="!noYear && !noMonth"
+        class="separator"
+      />
+      <input
+        v-if="!noMonth"
+        class="input month"
+        type="number"
+        :value="modelValue.month"
+        placeholder="M"
+        :disabled="disabled"
+        @focus="onFocus"
+        @blur="updateMonth"
+      >
+      <div
+        v-if="!noMonth && !noDate"
+        class="separator"
+      />
+      <input
+        v-if="!noDate"
+        class="input date"
+        type="number"
+        :value="modelValue.date"
+        placeholder="D"
+        :disabled="disabled"
+        @focus="onFocus"
+        @blur="updateDate"
+      >
+    </div>
+  </SInputBase>
+</template>
+
 <style lang="postcss" scoped>
 .SInputYMD.mini {
   .container {
@@ -177,7 +173,7 @@ function createRequiredTouched(): boolean[] {
 
 .SInputYMD.small {
   .container {
-    padding: 0 4px;
+    padding: 0 6px;
   }
 
   .input {
@@ -187,7 +183,7 @@ function createRequiredTouched(): boolean[] {
   }
 
   .input.year  { width: 56px; }
-  .input.month { width: 40px; }
+  .input.month { width: 32px; }
   .input.date  { width: 40px; }
 
   .separator {
@@ -219,25 +215,6 @@ function createRequiredTouched(): boolean[] {
   }
 }
 
-.SInputYMD.outlined {
-  .container {
-    border: 1px solid var(--input-outlined-border);
-    border-radius: 4px;
-    transition: border-color .25s;
-
-    &:hover {
-      border-color: var(--input-focus-border);
-    }
-  }
-}
-
-.SInputYMD.outlined.disabled {
-  .container {
-    border-color: var(--input-outlined-border);
-    background-color: var(--input-outlined-bg-disabled);
-  }
-}
-
 .SInputYMD.disabled {
   .container,
   .input {
@@ -257,17 +234,37 @@ function createRequiredTouched(): boolean[] {
 
 .container {
   display: inline-flex;
-  border: 1px solid var(--input-border);
-  border-radius: 4px;
-  transition: border-color .25s;
+  border: 1px solid var(--c-divider);
+  border-radius: 6px;
+  background-color: var(--c-bg);
+  transition: border-color 0.25s;
 
   &:hover {
-    border-color: var(--input-focus-border);
+    border-color: var(--c-black);
+  }
+
+  &.focus,
+  &:hover.focus {
+    border-color: var(--c-info);
+  }
+
+  .dark &:hover {
+    border-color: var(--c-gray);
+  }
+
+  .dark &.focus,
+  .dark &:hover.focus {
+    border-color: var(--c-info);
   }
 }
 
 .input {
   background-color: transparent;
+
+  &::placeholder {
+    font-weight: 500;
+    color: var(--c-text-3);
+  }
 }
 
 .separator::before {

package/lib/components/SMarkdown.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue'
+import { LinkCallback, LinkSubscriberPayload, useMarkdown, useLink } from '../composables/Markdown'
+
+const props = defineProps<{
+  tag?: string
+  content: string
+  callbacks?: LinkCallback[]
+  inline?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'clicked', payload: LinkSubscriberPayload): void
+}>()
+
+const container = ref<Element | null>(null)
+
+const { addListeners, subscribe } = useLink({
+  container,
+  callbacks: props.callbacks
+})
+
+const markdown = useMarkdown()
+const rendered = computed(() => markdown(props.content, props.inline ?? false))
+
+watch(
+  rendered,
+  () => nextTick(() => addListeners()),
+  { immediate: true }
+)
+
+subscribe((payload) => emit('clicked', payload))
+</script>
+
+<template>
+  <component
+    v-if="$slots.default"
+    :is="tag ?? 'div'"
+    class="SMarkdown-container"
+    ref="container"
+  >
+    <slot v-bind="{ rendered }" />
+  </component>
+
+  <component
+    v-else
+    :is="tag ?? 'div'"
+    class="SMarkdown-container"
+    ref="container"
+    v-html="rendered"
+  />
+</template>

package/lib/components/SModal.vue

@@ -1,82 +1,44 @@
-<template>
-  <div v-show="show" class="SModal" ref="el">
-    <div class="content">
-      <component :is="component" v-bind="data ?? {}" @close="close" />
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
-
-const props = defineProps<{
-  id?: number
-  component: any
-  data?: Record<string, any>
-  show: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'close', id?: number): void
-}>()
-
-const el = ref<any>(null)
-
-onMounted(lock)
-onBeforeUnmount(release)
-
-function close() {
-  emit('close', props.id)
+export interface Props {
+  open: boolean
+  closable?: boolean
 }
 
-function lock() {
-  disableBodyScroll(el.value!, { reserveScrollBarGap: true })
-}
+withDefaults(defineProps<Props>(), {
+  closable: true
+})
 
-function release() {
-  enableBodyScroll(el.value!)
-}
+defineEmits<{
+  (e: 'close'): void
+}>()
 </script>
 
+<template>
+  <Teleport to="#sefirot-modals">
+    <transition name="fade">
+      <div v-if="open" class="SModal" @click="closable && $emit('close')">
+        <slot />
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
 <style scoped lang="postcss">
 .SModal {
-  position: absolute;
+  position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  height: 100vh;
+  z-index: var(--z-index-backdrop);
+  background-color: rgba(0, 0, 0, .8);
+  transition: opacity 0.25s;
   overflow: hidden;
   overflow-y: auto;
 }
 
-.SModal.fade-enter-active .content,
-.SModal.fade-leave-active .content,
-.content.fade-enter-active,
-.content.fade-leave-active {
-  transition: opacity .25s, transform .25s;
-}
-
-.SModal.fade-enter-active .content,
-.content.fade-enter-active {
-  transition-delay: .15s;
-}
-
-.SModal.fade-enter-from .content,
-.content.fade-enter-from {
-  opacity: 0;
-  transform: translateY(8px);
-}
-
-.SModal.fade-leave-to .content,
-.content.fade-leave-to {
+.SModal.fade-enter-from,
+.SModal.fade-leave-to {
   opacity: 0;
-  transform: translateY(-8px);
-}
-
-.content {
-  margin: 0 auto;
-  transition: opacity .25s, transform .25s;
 }
 </style>

package/lib/components/SMount.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+defineProps<{
+  tag?: string
+}>()
+
+const mount = ref(true)
+
+onMounted(() => {
+  setTimeout(() => { mount.value = false }, 100)
+})
+</script>
+
+<template>
+  <component :is="tag ?? 'div'" class="SMount mount-active" :class="{ mount }">
+    <slot />
+  </component>
+</template>

package/lib/components/SSheet.vue

@@ -1,92 +1,86 @@
-<template>
-  <div class="SSheet" :class="[size ?? 'medium']" @click="closeIfClosable">
-    <article class="box" @click.stop>
-      <div v-if="closable !== false" class="close">
-        <button class="close-button" @click="$emit('close')">
-          <SIconX class="close-icon" />
-        </button>
-      </div>
-
-      <slot :close="() => emit('close')" />
-    </article>
-  </div>
-</template>
-
 <script setup lang="ts">
-import SIconX from './icons/SIconX.vue'
+import SIconX from 'sefirot/components/icons/SIconX.vue'
 
-const props = defineProps<{
+export interface Props {
   size?: 'small' | 'medium' | 'large'
   closable?: boolean
-}>()
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'medium',
+  closable: true
+})
 
-const emit = defineEmits<{
+defineEmits<{
   (e: 'close'): void
 }>()
-
-function closeIfClosable() {
-  if (props.closable !== false) {
-    emit('close')
-  }
-}
 </script>
 
+<template>
+  <FMount class="SSheet" :class="[size]" @click.stop>
+    <button v-if="closable ?? true" class="close" @click="$emit('close')">
+      <SIconX class="icon" />
+    </button>
+
+    <slot />
+  </FMount>
+</template>
+
 <style scoped lang="postcss">
 .SSheet {
-  padding: 16px 16px 96px;
-  min-height: 100vh;
+  position: relative;
+  border: 1px solid var(--c-divider-light);
+  border-radius: 16px;
+  background-color: var(--c-bg);
+  transition: opacity 0.25s, transform 0.25s;
 
-  @media (min-width: 512px) {
-    padding: 32px 24px 96px;
+  .dark & {
+    background-color: var(--c-bg-mute);
   }
 
-  @media (min-width: 768px) {
-    padding: 48px 32px 128px;
+  .SModal & {
+    margin: 96px auto;
+    box-shadow: var(--shadow-depth-5);
+
+    .dark & {
+      background-color: var(--c-bg-soft);
+    }
   }
 }
 
-.SSheet.small .box  { max-width: 392px; }
-.SSheet.medium .box { max-width: 512px; }
-.SSheet.large .box  { max-width: 768px; }
+.SSheet.small  { max-width: 512px; }
+.SSheet.medium { max-width: 768px; }
+.SSheet.large  { max-width: 1024px; }
 
-.box {
-  position: relative;
-  margin: 0 auto;
-  border: 1px solid var(--c-divider-light);
-  border-radius: 8px;
-  background-color: var(--c-bg);
-  box-shadow: var(--shadow-depth-3);
+.SSheet.mount {
+  opacity: 0;
+  transform: translateY(8px);
 }
 
 .close {
   position: absolute;
-  top: 10px;
+  top: 4px;
   right: 4px;
-  z-index: 10;
-
-  @media (min-width: 512px) {
-    top: 14px;
-    right: 12px;
-  }
-}
-
-.close-button {
-  display: flex;
+  display: none;
   justify-content: center;
   align-items: center;
   width: 48px;
   height: 48px;
   color: var(--c-text-3);
-  transition: color .25s;
+  transition: color 0.25s;
 
   &:hover {
     color: var(--c-text-1);
   }
+
+  .SModal & {
+    display: flex;
+  }
 }
 
-.close-icon {
-  width: 20px;
-  height: 20px;
+.icon {
+  width: 24px;
+  height: 24px;
   fill: currentColor;
 }
 </style>

package/lib/components/SSheetFooter.vue

@@ -10,7 +10,7 @@
   padding: 0 16px;
 
   @media (min-width: 512px) {
-    padding: 0 24px;
+    padding: 0 32px;
   }
 }
 </style>