@globalbrain/sefirot 0.71.0 → 2.0.0-draft.3

package/README.md

@@ -20,7 +20,7 @@ We're really excited that you are interested in contributing to Sefirot. Before
 
 ### Code style guide
 
-Sefirot follows the official [Vue Style Guide](https://vuejs.org/v2/style-guide/). But always remember to follow the "Golden Rule"…
+Sefirot follows the official [Vue Style Guide](https://v3.vuejs.org/style-guide/). But always remember to follow the "Golden Rule"…
 
 > Every line of code should appear to be written by a single person, no matter the number of contributors.
 > &mdash; <cite>@mdo</cite>

package/lib/assets/styles/bootstrap.css

@@ -1,4 +1,3 @@
-@import 'simplebar/dist/simplebar.min';
-
+@import "normalize.css";
 @import "./variables";
 @import "./base";

package/lib/assets/styles/variables.css

@@ -105,7 +105,7 @@
   --c-text-inverse-4: var(--c-text-dark-4);
 }
 
-.dark-mode {
+.dark {
   --c-bg: var(--c-black-deep);
   --c-bg-soft: var(--c-black-soft);
   --c-bg-mute: var(--c-black-mute);
@@ -129,9 +129,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --font-family-base: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
-  --font-family-primary: "interstate", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
-  --font-family-number: "Roboto", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
+  --font-family-base: "Roboto", "Noto Sans JP", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica Neue", "Arial", "sans-serif";
   --font-family-mono: "source-code-pro", "Menlo", "Monaco", "Consolas", "Courier New", monospace;
 }
 
@@ -152,12 +150,8 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --z-index-tooltip: 1000;
-  --z-index-dropdown: 2000;
-  --z-index-screen: 3000;
-  --z-index-backdrop: 4000;
-  --z-index-modal: 4100;
-  --z-index-snackbar: 5000;
+  --z-index-dropdown: 1000;
+  --z-index-backdrop: 2000;
 }
 
 /**
@@ -185,7 +179,7 @@
   --preloader-color: var(--c-black);
 }
 
-.dark-mode {
+.dark {
   --preloader-color: var(--c-white);
 }
 
@@ -239,7 +233,7 @@
   --button-mute-inverse-bg-focus: var(--c-gray-dark-2);
 }
 
-.dark-mode {
+.dark {
   --button-primary-text: var(--c-text-inverse-1);
   --button-primary-bg: var(--c-white);
   --button-primary-bg-hover: var(--c-gray-light-3);
@@ -293,51 +287,24 @@
   --input-note: var(--c-text-2);
   --input-text: var(--c-text-1);
   --input-placeholder: var(--c-text-3);
+  --input-help: var(--c-text-2);
 
-  --input-filled-bg: var(--c-bg-mute);
-  --input-filled-bg-focus: var(--c-bg);
-  --input-filled-bg-disabled: var(--c-gray-light-4);
-
-  --input-outlined-bg-disabled: var(--c-white-mute);
-  --input-outlined-border: var(--c-divider);
-  --input-outlined-border-focus: var(--c-black);
+  --input-border: var(--c-divider);
 
-  --input-clear-bg-disabled: var(--c-white);
+  --input-hover-border: var(--c-black);
 
   --input-focus-border: var(--c-black);
   --input-focus-bg: var(--c-white);
 
-  --input-help: var(--c-text-2);
-
-  --input-action-filled-bg: var(--c-white-mute);
-  --input-action-filled-bg-hover: var(--c-gray-light-4);
-  --input-action-filled-bg-focus: var(--c-gray-light-3);
-
-  --input-action-outlined-bg: var(--c-white-mute);
-  --input-action-outlined-border: var(--c-divider);
-  --input-action-outlined-bg-hover: var(--c-gray-light-4);
-  --input-action-outlined-bg-focus: var(--c-gray-light-3);
+  --input-disabled-bg: var(--c-white-mute);
 }
 
-.dark-mode {
-  --input-outlined-bg-disabled: var(--c-black-mute);
-  --input-outlined-border-focus: var(--c-gray);
+.dark {
+  --input-hover-border: var(--c-gray);
 
   --input-focus-border: var(--c-gray);
-}
 
-/**
- * Component: Card
- * -------------------------------------------------------------------------- */
-
-:root {
-  --card-bg: var(--c-white);
-  --card-bg-mute: var(--c-white-soft);
-  --card-shadow-depth-1: var(--shadow-depth-1);
-  --card-shadow-depth-2: var(--shadow-depth-2);
-  --card-shadow-depth-3: var(--shadow-depth-3);
-  --card-shadow-depth-4: var(--shadow-depth-4);
-  --card-shadow-depth-5: var(--shadow-depth-5);
+  --input-disabled-bg: var(--c-black-mute);
 }
 
 /**
@@ -348,6 +315,6 @@
   --dropdown-item-hover-bg: var(--c-white-soft);
 }
 
-.dark-mode {
+.dark {
   --dropdown-item-hover-bg: var(--c-black);
 }

package/lib/components/SAvatar.vue

@@ -5,29 +5,20 @@
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
 
 type Size = 'nano' | 'mini' | 'small' | 'medium' | 'large'
 
-export default defineComponent({
-  props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
-    avatar: { type: String, required: true },
-    name: { type: String, default: '' }
-  },
-
-  setup(props) {
-    const classes = computed(() => [props.size])
+const props = defineProps({
+  size: { type: String as PropType<Size>, default: 'medium' },
+  avatar: { type: String, required: true },
+  name: { type: String, default: '' }
+})
 
-    const initial = computed(() => props.name.charAt(0).toUpperCase())
+const classes = computed(() => [props.size])
 
-    return {
-      classes,
-      initial
-    }
-  }
-})
+const initial = computed(() => props.name.charAt(0).toUpperCase())
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/SButton.vue

@@ -20,61 +20,48 @@
   </component>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
 import SIconPreloader from './icons/SIconPreloader.vue'
 
 type Size = 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
 
-export default defineComponent({
-  components: {
-    SIconPreloader
-  },
-
-  props: {
-    label: { type: String, default: null },
-    tag: { type: String, default: 'button' },
-    to: { type: String, default: '/' },
-    type: { type: String, default: 'primary' },
-    mode: { type: String, default: 'neutral' },
-    size: { type: String as PropType<Size>, default: 'medium' },
-    rounded: { type: Boolean, default: false },
-    icon: { type: Object, default: null },
-    block: { type: Boolean, default: false },
-    inverse: { type: Boolean, default: false },
-    loading: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
-  },
-
-  setup(props, { emit }) {
-    const classes = computed(() => [
-      props.type,
-      props.mode,
-      props.size,
-      { rounded: props.rounded },
-      { block: props.block },
-      { inverse: props.inverse },
-      { 'has-label': props.label },
-      { 'has-icon': props.icon },
-      { loading: props.loading },
-      { disabled: props.disabled }
-    ])
-
-    function handleClick(): void {
-      !props.disabled && emit('click')
-    }
-
-    return {
-      classes,
-      handleClick
-    }
-  }
+const props = defineProps({
+  label: { type: String, default: null },
+  tag: { type: String, default: 'button' },
+  to: { type: String, default: '/' },
+  type: { type: String, default: 'primary' },
+  mode: { type: String, default: 'neutral' },
+  size: { type: String as PropType<Size>, default: 'medium' },
+  rounded: { type: Boolean, default: false },
+  icon: { type: Object, default: null },
+  block: { type: Boolean, default: false },
+  inverse: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false }
 })
+
+const emit = defineEmits(['click'])
+
+const classes = computed(() => [
+  props.type,
+  props.mode,
+  props.size,
+  { rounded: props.rounded },
+  { block: props.block },
+  { inverse: props.inverse },
+  { 'has-label': props.label },
+  { 'has-icon': props.icon },
+  { loading: props.loading },
+  { disabled: props.disabled }
+])
+
+function handleClick(): void {
+  !props.disabled && emit('click')
+}
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SButton {
   position: relative;
   display: inline-block;
@@ -196,7 +183,7 @@ export default defineComponent({
     }
   }
 
-  & .loader-icon >>> .bar {
+  & .loader-icon :deep(.bar) {
     fill: var(--c-text-inverse-1);
   }
 }

package/lib/components/SDialog.vue

@@ -22,53 +22,35 @@
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { DialogType } from '../composables/Dialog'
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { Action } from '../store/dialog'
 import SIconPreloader from './icons/SIconPreloader.vue'
 import SButton from './SButton.vue'
 
-export default defineComponent({
-  components: {
-    SIconPreloader,
-    SButton
-  },
-
-  props: {
-    type: { type: String as PropType<DialogType>, default: 'confirm' },
-    title: { type: String, default: null },
-    text: { type: String, default: null },
-    progress: { type: Object, default: () => ({}) },
-    actions: { type: Array, default: () => [] }
-  },
-
-  setup(props) {
-    const isTypeLoading = computed(() => props.type === 'loading')
-    const isLoadOnly = computed(() => isTypeLoading.value && !props.title && !props.text)
-
-    function getActionType(value?: 'text' | 'mute'): 'text' | 'mute' {
-      return value !== 'mute' ? 'text' : 'mute'
-    }
-
-    return {
-      isTypeLoading,
-      isLoadOnly,
-      getActionType
-    }
-  }
+const props = defineProps({
+  type: { type: String as PropType<'confirm' | 'loading'>, default: 'confirm' },
+  title: { type: String, default: null },
+  text: { type: String, default: null },
+  actions: { type: Array as PropType<Action[]>, default: () => [] }
 })
+
+const isTypeLoading = computed(() => props.type === 'loading')
+const isLoadOnly = computed(() => isTypeLoading.value && !props.title && !props.text)
+
+function getActionType(value?: 'text' | 'mute'): 'text' | 'mute' {
+  return value !== 'mute' ? 'text' : 'mute'
+}
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SDialog {
   margin: 96px 16px;
   border: 1px solid var(--c-divider-light);
   border-radius: 8px;
   padding: 16px 16px 8px;
   max-width: 392px;
-  background-color: var(--modal-content-bg);
+  background-color: var(--c-bg);
   box-shadow: var(--shadow-depth-3);
 
   @media (min-width: 424px) {

package/lib/components/SDropdown.vue

@@ -12,10 +12,8 @@
         size="mini"
         mode="outlined"
         :placeholder="options.search.placeholder"
-        :value="options.search.value.value"
-        @input="v => options.search.onInput(v)"
-        @down="focusFirstItem"
-        @escape="$emit('close')"
+        :model-value="options.search.value.value"
+        @update:model-value="v => options.search?.onInput(v)"
       />
     </div>
 
@@ -38,69 +36,52 @@
         </li>
       </ul>
 
-      <p v-else class="item-missing">{{ options.search.missing }}</p>
+      <p v-else class="item-missing">{{ options.search?.missing }}</p>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
+<script setup lang="ts">
+import { PropType } from 'vue'
 import { Dropdown, Item } from '../composables/Dropdown'
 import SIconX from './icons/SIconX.vue'
 import SInputText from './SInputText.vue'
 import SDropdownItem from './SDropdownItem.vue'
 
-export default defineComponent({
-  components: {
-    SIconX,
-    SInputText,
-    SDropdownItem
-  },
-
-  props: {
-    round: { type: Number, default: 8 },
-    options: { type: Object as PropType<Dropdown>, required: true }
-  },
-
-  setup(props, { emit }) {
-    function focusFirstItem(): void {
-      const el = document.querySelector('.SDropdown .item:first-child') as HTMLElement | null
-      el?.focus?.()
-    }
-
-    function focusPrev(event: any): void {
-      event.target.previousSibling?.focus()
-    }
-
-    function focusNext(event: any): void {
-      event.target.nextSibling?.focus()
-    }
-
-    function onClick(item: Item): void {
-      if (item.callback) {
-        item.callback()
-      } else if (props.options.callback) {
-        props.options.callback(item)
-      }
-
-      if (props.options.closeOnClick) {
-        emit('close')
-      }
-    }
-
-    return {
-      focusFirstItem,
-      focusPrev,
-      focusNext,
-      onClick
-    }
-  }
+const props = defineProps({
+  round: { type: Number, default: 8 },
+  options: { type: Object as PropType<Dropdown>, required: true }
 })
+
+const emit = defineEmits(['close'])
+
+function focusFirstItem(): void {
+  const el = document.querySelector('.SDropdown .item:first-child') as HTMLElement | null
+  el?.focus?.()
+}
+
+function focusPrev(event: any): void {
+  event.target.previousSibling?.focus()
+}
+
+function focusNext(event: any): void {
+  event.target.nextSibling?.focus()
+}
+
+function onClick(item: Item): void {
+  if (item.callback) {
+    item.callback()
+  } else if (props.options.callback) {
+    props.options.callback(item)
+  }
+
+  if (props.options.closeOnClick) {
+    emit('close')
+  }
+}
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SDropdown {
   display: inline-block;
   overflow: hidden;
@@ -112,7 +93,7 @@ export default defineComponent({
   transition: background-color .25s;
 }
 
-.dark-mode .SDropdown {
+.dark .SDropdown {
   background-color: var(--c-black-soft);
 }
 

package/lib/components/SDropdownItem.vue

@@ -1,6 +1,6 @@
 <template>
   <li class="SDropdownItem" role="button" @click="$emit('click')">
-    <div class="content">
+    <div v-if="item" class="content">
       <component :is="component" :item="item" />
     </div>
 
@@ -10,55 +10,43 @@
   </li>
 </template>
 
-<script lang="ts">
-import { ComputedRef, PropType, defineComponent, computed } from '@vue/composition-api'
-import { isArray, isEqual } from '../support/Util'
-import { Item } from '../composables/Dropdown'
+<script setup lang="ts">
+import { ComputedRef, PropType, computed } from 'vue'
+import { isArray, isEqual } from '../support/Utils'
 import SIconCheck from './icons/SIconCheck.vue'
 import SDropdownItemText from './SDropdownItemText.vue'
 import SDropdownItemUser from './SDropdownItemUser.vue'
 
-export default defineComponent({
-  components: {
-    SIconCheck
-  },
-
-  props: {
-    selected: { type: Object as PropType<ComputedRef<any>>, default: null },
-    item: { type: Object as PropType<Item>, required: true }
-  },
+const props = defineProps({
+  selected: { type: Object as PropType<ComputedRef<any>>, default: null },
+  item: { type: Object as PropType<any>, default: null }
+})
 
-  setup(props) {
-    const component = computed(() => {
-      if (props.item.type === 'text') {
-        return SDropdownItemText
-      }
+defineEmits(['click'])
 
-      if (props.item.type === 'user') {
-        return SDropdownItemUser
-      }
+const component = computed(() => {
+  if (props.item.type === 'text') {
+    return SDropdownItemText
+  }
 
-      throw new Error('Invalid item type.')
-    })
+  if (props.item.type === 'user') {
+    return SDropdownItemUser
+  }
 
-    const isActive = computed(() => {
-      if (!props.selected) {
-        return false
-      }
+  throw new Error('Invalid item type.')
+})
 
-      const selected = props.selected.value
-      const value = props.item.value
+const isActive = computed(() => {
+  if (!props.selected) {
+    return false
+  }
 
-      return isArray(selected)
-        ? !!selected.find(s => isEqual(s, value))
-        : isEqual(selected, value)
-    })
+  const selected = props.selected.value
+  const value = props.item.value
 
-    return {
-      component,
-      isActive
-    }
-  }
+  return isArray(selected)
+    ? !!selected.find(s => isEqual(s, value))
+    : isEqual(selected, value)
 })
 </script>
 

package/lib/components/SDropdownItemText.vue

@@ -4,20 +4,15 @@
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import { Item } from '../composables/Dropdown'
+<script setup lang="ts">
+import { PropType } from 'vue'
 
-export default defineComponent({
-  props: {
-    item: { type: Object as PropType<Item>, required: true }
-  }
+defineProps({
+  item: { type: Object as PropType<any>, required: true }
 })
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .text {
   margin: 0;
   line-height: 16px;

package/lib/components/SDropdownItemUser.vue

@@ -8,25 +8,17 @@
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
+<script setup lang="ts">
+import { PropType } from 'vue'
 import { UserItem } from '../composables/Dropdown'
 import SAvatar from './SAvatar.vue'
 
-export default defineComponent({
-  components: {
-    SAvatar
-  },
-
-  props: {
-    item: { type: Object as PropType<UserItem>, required: true }
-  }
+defineProps({
+  item: { type: Object as PropType<UserItem>, required: true }
 })
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SDropdownItemUser {
   position: relative;
 }