@globalbrain/sefirot 0.67.0 → 0.68.0

package/lib/components/SInputText.vue

@@ -95,8 +95,9 @@ import SIconChevronDown from './icons/SIconChevronDown.vue'
 import SIconX from './icons/SIconX.vue'
 import SInputBase from './SInputBase.vue'
 
-export type Size = 'medium' | 'mini'
+export type Size = 'mini' | 'small' | 'medium'
 export type Mode = 'filled' | 'outlined'
+export type Align = 'left' | 'center' | 'right'
 export type Color = 'neutral' | 'info' | 'success' | 'warning' | 'danger'
 export type ColorCallback = (value: string | number) => Color
 
@@ -126,6 +127,7 @@ export default defineComponent({
     placeholder: { type: String, default: null },
     action: { type: Object as PropType<Action>, default: null },
     icon: { type: Object, default: null },
+    align: { type: String as PropType<Align>, default: null },
     text: { type: String, default: null },
     textAfter: { type: String, default: null },
     color: { type: Function as PropType<ColorCallback>, default: null },
@@ -144,15 +146,14 @@ export default defineComponent({
     const textAfterEl = ref<HTMLElement | null>(null)
     const color = ref<Color | null>(null)
 
-    const classes = computed(() => ({
-      medium: props.size === 'medium',
-      mini: props.size === 'mini',
-      filled: props.mode === 'filled',
-      outlined: props.mode === 'outlined',
-      disabled: props.disabled
-    }))
+    const classes = computed(() => [
+      props.size,
+      props.mode,
+      { disabled: props.disabled }
+    ])
 
     const inputStyles = reactive({
+      textAlign: props.align,
       paddingRight: '',
       paddingLeft: ''
     })
@@ -332,6 +333,79 @@ export default defineComponent({
   }
 }
 
+.SInputText.small {
+  .action {
+    padding: 3px 10px;
+    line-height: 24px;
+  }
+
+  .action-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .action-icon + .action-text,
+  .action-icon + .action-select,
+  .action-text + .action-select {
+    margin-left: 6px;
+  }
+
+  .action-text {
+    font-size: 14px;
+  }
+
+  .input,
+  .input-area {
+    padding: 7px 12px;
+    width: 100%;
+    line-height: 24px;
+    min-height: 40px;
+    font-size: 16px;
+
+    &.has-icon {
+      padding-left: 30px;
+    }
+
+    &.is-clearable {
+      padding-right: 40px;
+    }
+  }
+
+  .icon {
+    top: 9px;
+    left: 10px;
+  }
+
+  .icon-svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .text {
+    padding: 0 8px 0 12px;
+    line-height: 40px;
+    font-size: 16px;
+  }
+
+  .text-after {
+    padding: 0 12px 0 8px;
+    line-height: 32px;
+    font-size: 14px;
+  }
+
+  .clear {
+    top: 0;
+    right: 0;
+    width: 32px;
+    height: 32px;
+  }
+
+  .clear-svg {
+    width: 10px;
+    height: 10px;
+  }
+}
+
 .SInputText.medium {
   .action {
     padding: 11px 12px;
@@ -416,13 +490,13 @@ export default defineComponent({
 
     &:focus {
       border-color: var(--input-focus-border);
-      background-color: var(--input-focus-bg);
+      background-color: var(--input-filled-bg-focus);
     }
   }
 
   .input-area:focus + .input {
     border-color: var(--input-focus-border);
-    background-color: var(--input-focus-bg);
+    background-color: var(--input-filled-bg-focus);
   }
 
   &.disabled .input {
@@ -448,6 +522,11 @@ export default defineComponent({
     }
   }
 
+  .input-area:focus + .input {
+    border-color: var(--input-focus-border);
+    background-color: var(--input-filled-bg-focus);
+  }
+
   &.disabled .box:hover .input {
     border-color: var(--input-outlined-border);
   }

package/lib/components/SInputTextarea.vue

@@ -137,7 +137,6 @@ export default defineComponent({
 
     &:focus {
       border-color: var(--input-focus-border);
-      background-color: var(--input-focus-bg);
     }
   }
 

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/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/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>

package/lib/composables/Modal.ts

@@ -1,19 +1,30 @@
-import { Item } from '../store/modal'
+import { Options as ModalOptions } from '../store/modal'
 import { useStore } from './Store'
 
 export interface Modal {
-  open(item: Omit<Item, 'uid'>): Promise<any>
+  open(item?: OpenOptions): Promise<any>
   close(): Promise<any>
 }
 
+export interface OpenOptions {
+  component?: any
+  uid?: number
+  data?: Record<string, any>
+  options?: ModalOptions
+}
+
 let modalUid = 0
 
-export function useModal(): Modal {
+export function useModal(component?: any): Modal {
   const store = useStore()
   const uid = useModalUid()
 
-  function open(item: Omit<Item, 'uid'>) {
-    return store.dispatch('modal/open', { ...item, uid })
+  function open(item: OpenOptions = {}) {
+    return store.dispatch('modal/open', {
+      uid,
+      component,
+      ...item
+    })
   }
 
   function close() {

package/lib/composables/Tooltip.ts

@@ -22,7 +22,7 @@ export function useTooltip(
   }
 
   function hide(): void {
-    on.value = false
+    setTimeout(() => { on.value = false })
   }
 
   function setPosition(): void {

package/lib/mixins/Sheet.ts

@@ -0,0 +1,22 @@
+import { defineComponent } from '@vue/composition-api'
+import SSheet from '../components/SSheet.vue'
+import SSheetHeader from '../components/SSheetHeader.vue'
+import SSheetHeaderTitle from '../components/SSheetHeaderTitle.vue'
+import SSheetMedium from '../components/SSheetMedium.vue'
+import SSheetFooter from '../components/SSheetFooter.vue'
+import SSheetFooterActions from '../components/SSheetFooterActions.vue'
+import SSheetFooterAction from '../components/SSheetFooterAction.vue'
+
+export default function Sheet() {
+  return defineComponent({
+    components: {
+      SSheet,
+      SSheetHeader,
+      SSheetHeaderTitle,
+      SSheetMedium,
+      SSheetFooter,
+      SSheetFooterActions,
+      SSheetFooterAction
+    }
+  })
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@globalbrain/sefirot",
-  "version": "0.67.0",
+  "version": "0.68.0",
   "description": "Vue Components for Global Brain Design System.",
   "files": [
     "lib"
@@ -36,51 +36,52 @@
   },
   "devDependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@nuxt/types": "^2.15.4",
+    "@nuxt/types": "^2.15.8",
     "@nuxt/typescript-build": "^2.1.0",
-    "@nuxtjs/composition-api": "^0.22.4",
+    "@nuxtjs/color-mode": "^2.1.1",
+    "@nuxtjs/composition-api": "^0.29.3",
     "@nuxtjs/dotenv": "^1.4.1",
-    "@nuxtjs/eslint-config-typescript": "^6.0.0",
+    "@nuxtjs/eslint-config-typescript": "^6.0.1",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/markdownit": "^1.2.10",
-    "@types/body-scroll-lock": "^2.6.1",
+    "@types/body-scroll-lock": "^3.1.0",
     "@types/escape-html": "^1.0.1",
-    "@types/jest": "^26.0.23",
-    "@types/lodash-es": "^4.17.4",
-    "@types/markdown-it": "^12.0.1",
-    "@types/prismjs": "^1.16.5",
-    "@vue/composition-api": "^1.0.0-rc.6",
-    "@vue/test-utils": "^1.1.3",
+    "@types/jest": "^27.0.2",
+    "@types/lodash-es": "^4.17.5",
+    "@types/markdown-it": "^12.2.3",
+    "@types/prismjs": "^1.16.6",
+    "@vue/composition-api": "^1.2.4",
+    "@vue/test-utils": "^1.2.2",
+    "@vue/vue2-jest": "^27.0.0-alpha.2",
     "babel-core": "^7.0.0-bridge.0",
     "body-scroll-lock": "^3.1.5",
-    "codecov": "^3.8.2",
+    "codecov": "^3.8.3",
     "conventional-changelog-cli": "^2.1.1",
-    "dayjs": "^1.10.4",
+    "dayjs": "^1.10.7",
     "escape-html": "^1.0.3",
-    "eslint": "^7.26.0",
+    "eslint": "^7.32.0",
     "fuse.js": "^6.4.6",
-    "jest": "^26.6.3",
+    "jest": "^27.3.1",
     "jest-serializer-vue": "^2.0.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "markdown-it": "^12.0.6",
-    "markdown-it-anchor": "^7.1.0",
+    "markdown-it": "^12.2.0",
+    "markdown-it-anchor": "^8.4.1",
     "normalize.css": "^8.0.1",
-    "nuxt": "^2.15.4",
+    "nuxt": "^2.15.8",
     "portal-vue": "^2.1.7",
     "postcss-custom-properties": "^10.0.0",
     "postcss-nested": "^4.2.3",
-    "prismjs": "^1.23.0",
+    "prismjs": "^1.25.0",
     "push-dir": "^0.4.1",
-    "simplebar-vue": "^1.6.3",
-    "ts-jest": "^26.5.6",
-    "ts-loader": "^8.1.0",
-    "typescript": "^4.2.4",
-    "v-calendar": "^2.3.0",
-    "vue": "^2.6.12",
-    "vue-jest": "^3.0.7",
-    "vue-router": "^3.5.1",
-    "vue-server-renderer": "^2.6.12",
-    "vue-template-compiler": "^2.6.12"
+    "simplebar-vue": "^1.6.8",
+    "ts-jest": "^27.0.7",
+    "ts-loader": "^8.3.0",
+    "typescript": "^4.4.4",
+    "v-calendar": "^2.3.4",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.2",
+    "vue-server-renderer": "^2.6.14",
+    "vue-template-compiler": "^2.6.14"
   }
 }