@globalbrain/sefirot 0.65.0 → 0.68.0

package/lib/components/SInputYMD.vue

@@ -0,0 +1,244 @@
+<template>
+  <SInputBase
+    class="SInputYMD"
+    :class="[size, mode, { disabled }]"
+    :name="name"
+    :label="label"
+    :note="note"
+    :help="help"
+    :error-message="errorMessage"
+    :validation="validation"
+  >
+    <div class="container">
+      <input
+        v-if="year"
+        class="input year"
+        type="number"
+        :value="value && value.year"
+        placeholder="YYYY"
+        :disabled="disabled"
+        @blur="updateYear"
+      >
+      <div
+        v-if="year && month"
+        class="separator"
+      />
+      <input
+        v-if="month"
+        class="input month"
+        type="number"
+        :value="value && value.month"
+        placeholder="M"
+        :disabled="disabled"
+        @blur="updateMonth"
+      >
+      <div
+        v-if="month && date"
+        class="separator"
+      />
+      <input
+        v-if="date"
+        class="input date"
+        type="number"
+        :value="value && value.date"
+        placeholder="D"
+        :disabled="disabled"
+        @blur="updateDate"
+      >
+    </div>
+
+    <template #before-help>
+      <slot name="before-help" />
+    </template>
+  </SInputBase>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from '@vue/composition-api'
+import { SyntheticInputEvent } from '../types/Utils'
+import { Validation } from '../validation/Validation'
+import SInputBase from './SInputBase.vue'
+
+export type Size = 'mini'
+export type Mode = 'outlined'
+
+export interface Value {
+  year?: number
+  month?: number
+  date?: number
+}
+
+export type ValueType = 'year' | 'month' | 'date'
+
+export interface Fields {
+  year?: boolean
+  month?: boolean
+  date?: boolean
+}
+
+export default defineComponent({
+  components: {
+    SInputBase
+  },
+
+  props: {
+    size: { type: String as PropType<Size>, default: 'mini' },
+    mode: { type: String as PropType<Mode>, default: 'outlined' },
+    name: { type: String, default: null },
+    label: { type: String, default: null },
+    note: { type: String, default: null },
+    help: { type: String, default: null },
+    placeholder: { 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 },
+    value: { type: Object as PropType<Value>, default: null },
+    validation: { type: Object as PropType<Validation>, default: null }
+  },
+
+  setup(props, { emit }) {
+    const touched = {
+      year: false,
+      month: false,
+      date: false
+    }
+
+    function updateYear(e: SyntheticInputEvent): void {
+      const value = Number(e.target.value)
+      update('year', value === 0 ? undefined : value)
+    }
+
+    function updateMonth(e: SyntheticInputEvent): void {
+      const value = Number(e.target.value)
+      update('month', value === 0 ? undefined : value)
+    }
+
+    function updateDate(e: SyntheticInputEvent): void {
+      const value = Number(e.target.value)
+      update('date', value === 0 ? undefined : value)
+    }
+
+    function update(type: ValueType, value?: number): void {
+      const data = { ...props.value } as Value
+
+      setValue(data, type, value)
+
+      data.year === undefined && data.month === undefined && data.date === undefined
+        ? emit('input', null)
+        : emit('input', data)
+
+      emitTouch(type)
+    }
+
+    function setValue(data: Value, type: ValueType, value?: number): void {
+      if (value === undefined) {
+        delete data[type]
+        return
+      }
+
+      data[type] = value
+    }
+
+    function emitTouch(type: ValueType): void {
+      if (!props.validation || props.validation.$isDirty.value) {
+        return
+      }
+
+      touched[type] = true
+
+      if (createRequiredTouched().every(v => v)) {
+        props.validation.$touch()
+      }
+    }
+
+    function createRequiredTouched(): boolean[] {
+      const requiredTouched = [] as boolean[]
+
+      for (const key in touched) {
+        if ((props as any)[key]) {
+          requiredTouched.push((touched as any)[key])
+        }
+      }
+
+      return requiredTouched
+    }
+
+    return {
+      updateYear,
+      updateMonth,
+      updateDate
+    }
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+@import "@/assets/styles/variables";
+
+.SInputYMD.mini {
+  .container {
+    padding: 0 4px;
+  }
+
+  .input {
+    padding: 3px 0;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .input.year  { width: 48px; }
+  .input.month { width: 32px; }
+  .input.date  { width: 32px; }
+
+  .separator {
+    padding: 3px 0;
+    line-height: 24px;
+    font-size: 14px;
+  }
+}
+
+.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 { cursor: not-allowed; }
+  .input     { cursor: not-allowed; }
+}
+
+.SInputYMD.has-error {
+  .container {
+    border-color: var(--c-danger);
+  }
+}
+
+.container {
+  display: flex;
+}
+
+.input {
+  background-color: transparent;
+}
+
+.separator::before {
+  color: var(--c-text-3);
+  content: "/";
+}
+</style>

package/lib/components/SModal.vue

@@ -2,7 +2,12 @@
   <transition name="fade" :duration="250" appear>
     <div ref="el" class="SModal" @click="closeIfClosable">
       <transition name="fade">
-        <div v-show="show" class="SModal-content" :style="contentStyles">
+        <div
+          v-show="show"
+          class="SModal-content"
+          :style="contentStyles"
+          @click="closeIfClosable"
+        >
           <component
             :is="resolvedComponent"
             :if="resolvedComponent"
@@ -58,7 +63,7 @@ export default defineComponent({
     }
 
     function isDescendant(el: Element): boolean {
-      if (el.classList && el.classList.contains('SModal')) {
+      if (el.classList && el.classList.contains('SModal-content')) {
         return false
       }
 

package/lib/components/SSheet.vue

@@ -0,0 +1,47 @@
+<template>
+  <article class="SSheet" :class="[size]">
+    <slot :close="close" />
+  </article>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from '@vue/composition-api'
+import { useStore } from '../composables/Store'
+
+type Size = 'small' | 'medium' | 'large'
+
+export default defineComponent({
+  props: {
+    size: { type: String as PropType<Size>, default: 'medium' }
+  },
+
+  setup() {
+    const store = useStore()
+
+    function close() {
+      store.dispatch('modal/close')
+    }
+
+    return {
+      close
+    }
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+@import "@/assets/styles/variables";
+
+.SSheet {
+  margin: 0 auto;
+  border: 1px solid var(--c-divider-light);
+  border-radius: 8px;
+  background-color: var(--c-bg);
+  box-shadow: var(--shadow-depth-3);
+  overflow: hidden;
+}
+
+.SSheet.small  { max-width: 392px; }
+.SSheet.medium { max-width: 512px; }
+.SSheet.large  { max-width: 768px; }
+</style>

package/lib/components/SSheetFooter.vue

@@ -0,0 +1,14 @@
+<template>
+  <footer class="SSheetFooter">
+    <slot />
+  </footer>
+</template>
+
+<style lang="postcss" scoped>
+@import "@/assets/styles/variables";
+
+.SSheetFooter {
+  border-top: 1px solid var(--c-divider-light);
+  padding: 0 16px;
+}
+</style>

package/lib/components/SSheetFooterAction.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="SSheetFooterAction">
+    <SButton
+      size="medium"
+      :type="type"
+      :mode="mode"
+      :label="label"
+      block
+      @click="$emit('click')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from '@nuxtjs/composition-api'
+import SButton from './SButton.vue'
+
+type Type = 'primary' | 'secondary' | 'tertiary' | 'text' | 'mute'
+type Mode = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
+
+export default defineComponent({
+  components: {
+    SButton
+  },
+
+  props: {
+    type: { type: String as PropType<Type>, default: 'primary' },
+    mode: { type: String as PropType<Mode>, default: 'neutral' },
+    label: { type: String, default: null }
+  }
+})
+</script>

package/lib/components/SSheetFooterActions.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="SSheetFooterActions">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+@import "@/assets/styles/variables";
+
+.SSheetFooterActions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 0 11px;
+}
+
+.SSheetFooterActions >>> .SSheetFooterAction + .SSheetFooterAction {
+  padding-left: 8px;
+}
+</style>

package/lib/components/SSheetHeader.vue

@@ -0,0 +1,75 @@
+<template>
+  <header class="SSheetHeader">
+    <slot />
+
+    <div v-if="closable" class="close">
+      <button class="close-button" @click="close">
+        <SIconX class="close-icon" />
+      </button>
+    </div>
+  </header>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+import { useStore } from '../composables/Store'
+import SIconX from './icons/SIconX.vue'
+
+export default defineComponent({
+  components: {
+    SIconX
+  },
+
+  props: {
+    closable: { type: Boolean, default: true }
+  },
+
+  setup() {
+    const store = useStore()
+
+    function close() {
+      store.dispatch('modal/close')
+    }
+
+    return {
+      close
+    }
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+@import "@/assets/styles/variables";
+
+.SSheetHeader {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--c-divider-light);
+  min-height: 48px;
+  background-color: var(--c-bg-soft);
+}
+
+.close {
+  margin: 0 0 0 auto;
+}
+
+.close-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 47px;
+  color: var(--c-text-3);
+  transition: color .25s;
+
+  &:hover {
+    color: var(--c-text-1);
+  }
+}
+
+.close-icon {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+</style>

package/lib/components/SSheetHeaderTitle.vue

@@ -0,0 +1,17 @@
+<template>
+  <h1 class="SSheetHeaderTitle">
+    <slot />
+  </h1>
+</template>
+
+<style lang="postcss" scoped>
+@import "@/assets/styles/variables";
+
+.SSheetHeaderTitle {
+  margin: 0;
+  padding: 14px 16px 10px;
+  line-height: 20px;
+  font-size: 16px;
+  font-weight: 500;
+}
+</style>

package/lib/components/SSheetMedium.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="SSheetMedium">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+@import "@/assets/styles/variables";
+
+.SSheetMedium {
+  padding: 24px 16px;
+
+  @media (min-width: 768px) {
+    padding: 24px;
+  }
+}
+
+.SSheet.small .SSheetMedium {
+  @media (min-width: 768px) {
+    padding: 24px 16px;
+  }
+}
+
+.SSheetMedium >>> h1 {
+  line-height: 32px;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.SSheetMedium >>> h1 + p {
+  margin-top: 8px;
+}
+
+.SSheetMedium >>> p {
+  margin: 16px 0;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.SSheetMedium >>> p:first-child {
+  margin-top: 0;
+}
+
+.SSheetMedium >>> p:last-child {
+  margin-bottom: 0;
+}
+
+.SSheetMedium >>> a {
+  font-weight: 500;
+  color: var(--c-info);
+  transition: color .25s;
+
+  &:hover {
+    color: var(--c-info-dark);
+  }
+}
+
+.SSheetMedium >>> ul {
+  margin: 16px 0;
+}
+
+.SSheetMedium >>> ul:last-child {
+  margin-bottom: 0;
+}
+
+.SSheetMedium >>> li {
+  position: relative;
+  padding-left: 20px;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.SSheetMedium >>> li::before {
+  position: absolute;
+  top: 9px;
+  left: 4px;
+  border-radius: 50%;
+  width: 6px;
+  height: 6px;
+  background-color: var(--c-text-3);
+  content: "";
+}
+
+.SSheetMedium >>> li + li {
+  margin-top: 4px;
+}
+
+.SSheetMedium >>> li > ul {
+  margin: 4px 0 0;
+}
+</style>

package/lib/components/SSnackbar.vue

@@ -57,6 +57,7 @@ export default defineComponent({
 
 .SSnackbar {
   position: relative;
+  border: 1px solid transparent;
   border-radius: 4px;
   width: 100%;
   color: var(--c-text-dark-1);
@@ -64,6 +65,10 @@ export default defineComponent({
   box-shadow: var(--shadow-depth-5);
 }
 
+.dark-mode .SSnackbar {
+  border-color: var(--c-divider-light);
+}
+
 .close {
   position: absolute;
   top: 4px;
@@ -83,8 +88,8 @@ export default defineComponent({
 }
 
 .close-icon {
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
   fill: var(--c-text-dark-2);
   transition: fill .25s;
 }

package/lib/components/icons/SIconGrab.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <circle cx="8.83" cy="12" r="2" />
+    <circle cx="8.83" cy="5" r="2" />
+    <circle cx="8.83" cy="19" r="2" />
+    <circle cx="15.17" cy="12" r="2" />
+    <circle cx="15.17" cy="5" r="2" />
+    <circle cx="15.17" cy="19" r="2" />
+  </svg>
+</template>

package/lib/components/icons/SIconInbox.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M22.9,11.6C22.9,11.6,22.9,11.6,22.9,11.6l-3.5-6.9c-0.5-1-1.5-1.7-2.7-1.7H7.2C6.1,3,5.1,3.6,4.6,4.7l-3.4,6.9c0,0,0,0,0,0C1,11.7,1,11.8,1,12v6c0,1.7,1.3,3,3,3h16c1.7,0,3-1.3,3-3v-6C23,11.8,23,11.7,22.9,11.6z M6.3,5.6C6.3,5.6,6.3,5.6,6.3,5.6C6.5,5.2,6.9,5,7.2,5h9.5c0.4,0,0.7,0.2,0.9,0.6l2.7,5.4H16c-0.3,0-0.6,0.2-0.8,0.4L13.5,14h-2.9l-1.7-2.6C8.6,11.2,8.3,11,8,11H3.6L6.3,5.6z M20,19H4c-0.6,0-1-0.4-1-1v-5h4.5l1.7,2.6C9.4,15.8,9.7,16,10,16h4c0.3,0,0.6-0.2,0.8-0.4l1.7-2.6H21v5C21,18.6,20.6,19,20,19z" />
+  </svg>
+</template>

package/lib/components/icons/SIconLock.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M19.64,9.82H18.55V6.55a6.55,6.55,0,0,0-13.1,0V9.82H4.36a3.28,3.28,0,0,0-3.27,3.27v7.64A3.28,3.28,0,0,0,4.36,24H19.64a3.28,3.28,0,0,0,3.27-3.27V13.09A3.28,3.28,0,0,0,19.64,9.82Zm-12-3.27a4.36,4.36,0,1,1,8.72,0V9.82H7.64ZM20.73,20.73a1.09,1.09,0,0,1-1.09,1.09H4.36a1.09,1.09,0,0,1-1.09-1.09V13.09A1.09,1.09,0,0,1,4.36,12H19.64a1.09,1.09,0,0,1,1.09,1.09Z" />
+  </svg>
+</template>

package/lib/components/icons/SIconMoreVertical.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="2" />
+    <circle cx="12" cy="5" r="2" />
+    <circle cx="12" cy="19" r="2" />
+  </svg>
+</template>