@globalbrain/sefirot 0.72.0 → 2.0.0-draft.1

package/lib/components/SInputBase.vue

@@ -8,61 +8,49 @@
 
     <div class="help">
       <slot name="before-help" />
-      <p v-if="showError" :key="errorMsg" class="help-error">{{ errorMsg }}</p>
+      <p v-if="showError" class="help-error">{{ errorMsg }}</p>
       <p v-if="help" class="help-text">{{ help }}</p>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { Validation } from '../validation/Validation'
-
-export default defineComponent({
-  props: {
-    name: { type: String, default: null },
-    note: { type: String, default: null },
-    label: { type: String, default: null },
-    help: { type: String, default: null },
-    errorMessage: { type: Boolean, default: true },
-    validation: { type: Object as PropType<Validation>, default: null }
-  },
-
-  setup(props) {
-    const hasError = computed(() => {
-      if (!props.validation) {
-        return false
-      }
-
-      return props.validation.$isDirty.value && !props.validation.$isValid.value
-    })
-
-    const errorMsg = computed(() => {
-      if (!props.validation) {
-        return null
-      }
-
-      const errors = props.validation.$errors.value
-
-      return errors.length > 0 ? errors[0][1] : null
-    })
-
-    const showError = computed(() => {
-      return props.errorMessage && hasError.value && errorMsg.value
-    })
-
-    return {
-      hasError,
-      errorMsg,
-      showError
-    }
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { Validatable } from '../composables/Validation'
+
+const props = defineProps({
+  name: { type: String, default: null },
+  note: { type: String, default: null },
+  label: { type: String, default: null },
+  help: { type: String, default: null },
+  errorMessage: { type: Boolean, default: true },
+  validation: { type: Object as PropType<Validatable>, default: null }
+})
+
+const hasError = computed(() => {
+  if (!props.validation) {
+    return false
   }
+
+  return props.validation.$dirty && props.validation.$invalid
+})
+
+const errorMsg = computed(() => {
+  if (!props.validation) {
+    return null
+  }
+
+  const errors = props.validation.$errors
+
+  return errors.length > 0 ? errors[0].$message : null
+})
+
+const showError = computed(() => {
+  return props.errorMessage && hasError.value && errorMsg.value
 })
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SInputBase.mini {
   .label {
     padding-bottom: 6px;

package/lib/components/SInputCheckbox.vue

@@ -2,14 +2,13 @@
   <SInputBase
     class="SInputCheckbox"
     :class="[size]"
-    :name="name"
     :label="label"
     :note="note"
     :help="help"
     :validation="validation"
   >
     <div class="container">
-      <div class="input" :class="{ on: value }" role="button" @click="emitChange">
+      <div class="input" :class="{ on: modelValue }" role="button" @click="emitChange">
         <div class="box">
           <div class="check">
             <SIconCheck class="check-icon" />
@@ -22,51 +21,32 @@
   </SInputBase>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import { Validation } from '../validation/Validation'
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { Validatable } from '../composables/Validation'
 import SIconCheck from './icons/SIconCheck.vue'
 import SInputBase from './SInputBase.vue'
 
 type Size = 'mini' | 'small' | 'medium'
 
-export default defineComponent({
-  components: {
-    SIconCheck,
-    SInputBase
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
+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 },
+  text: { type: String, required: true },
+  modelValue: { type: Boolean, required: true },
+  validation: { type: Object as PropType<Validatable>, default: null }
+})
 
-  props: {
-    size: { type: String as PropType<Size>, default: 'small' },
-    name: { type: String, default: null },
-    label: { type: String, default: null },
-    note: { type: String, default: null },
-    help: { type: String, default: null },
-    text: { type: String, required: true },
-    value: { type: Boolean, required: true },
-    validation: { type: Object as PropType<Validation>, default: null }
-  },
+const emit = defineEmits(['update:modelValue'])
 
-  setup(props, { emit }) {
-    function emitChange() {
-      emit('change', !props.value)
-    }
-
-    return {
-      emitChange
-    }
-  }
-})
+function emitChange() {
+  emit('update:modelValue', !props.modelValue)
+}
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .container {
   display: flex;
 }

package/lib/components/SInputDropdown.vue

@@ -2,7 +2,6 @@
   <SInputBase
     class="SInputDropdown"
     :class="classes"
-    :name="name"
     :label="label"
     :note="note"
     :help="help"
@@ -42,10 +41,10 @@
   </SInputBase>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, computed, nextTick } from '@vue/composition-api'
-import { isNullish, isArray, isEqual } from '../support/Util'
-import { useMenu } from '../composables/Menu'
+<script setup lang="ts">
+import { PropType, computed, nextTick } from 'vue'
+import { isNullish, isArray, isEqual } from '../support/Utils'
+import { useFlyout } from '../composables/Flyout'
 import { Search, Item, UseDropdownSearchOptions, useDropdown } from '../composables/Dropdown'
 import SIconChevronUp from './icons/SIconChevronUp.vue'
 import SIconChevronDown from './icons/SIconChevronDown.vue'
@@ -54,152 +53,119 @@ import SInputBase from './SInputBase.vue'
 import SInputDropdownItem from './SInputDropdownItem.vue'
 
 type Size = 'mini' | 'small' | 'medium'
-type Mode = 'outlined' | 'filled'
 type Value = string | number | boolean | unknown[]
 
-export default defineComponent({
-  components: {
-    SIconChevronUp,
-    SIconChevronDown,
-    SDropdown,
-    SInputBase,
-    SInputDropdownItem
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-
-  props: {
-    size: { type: String as PropType<Size>, default: 'small' },
-    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 },
-    search: { type: [Boolean, Object] as PropType<boolean | Search>, default: false },
-    options: { type: Array as PropType<Item[]>, required: true },
-    nullable: { type: Boolean, default: true },
-    closeOnClick: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    validation: { type: Object, default: null },
-    value: { type: [String, Number, Boolean, Array, Object] as PropType<Value>, default: null }
-  },
-
-  setup(props, { emit }) {
-    const { container, isOpen, open, close } = useMenu()
-
-    const classes = computed(() => [
-      props.size,
-      props.mode,
-      { disabled: props.disabled }
-    ])
-
-    const enabledItems = computed(() => {
-      return props.options.filter(option => !option.disabled)
-    })
-
-    const dropdownOptions = useDropdown({
-      search: createDropdownSearchOptions(),
-      items: enabledItems,
-      closeOnClick: props.closeOnClick,
-      selected: computed(() => props.value),
-      callback: handleCallback
-    })
-
-    const selected = computed(() => {
-      return isArray(props.value)
-        ? props.options.filter(o => (props.value as unknown[]).includes(o.value))
-        : props.options.find(o => isEqual(o.value, props.value))
-    })
-
-    const hasSelected = computed(() => {
-      return isArray(selected.value)
-        ? selected.value.length > 0
-        : !isNullish(selected.value) && selected.value.value !== ''
-    })
-
-    function createDropdownSearchOptions(): UseDropdownSearchOptions | undefined {
-      if (props.search === false) {
-        return undefined
-      }
-
-      if (props.search === true) {
-        return {
-          placeholder: 'Search items',
-          missing: 'No items found.'
-        }
-      }
-
-      return props.search
-    }
+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 },
+  placeholder: { type: String, default: null },
+  search: { type: [Boolean, Object] as PropType<boolean | Search>, default: false },
+  options: { type: Array as PropType<Item[]>, required: true },
+  nullable: { type: Boolean, default: true },
+  closeOnClick: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  modelValue: { type: [String, Number, Boolean, Array, Object] as PropType<Value>, default: null },
+  validation: { type: Object as PropType<any>, default: null }
+})
 
-    async function handleOpen(): Promise<void> {
-      if (!props.disabled) {
-        open()
+const emit = defineEmits(['update:modelValue'])
 
-        await nextTick()
+const { container, isOpen, open, close } = useFlyout()
 
-        const el = document.querySelector<HTMLInputElement>('.SInputDropdown .SDropdown .search .SInputText input')
+const classes = computed(() => [
+  props.size,
+  { disabled: props.disabled }
+])
 
-        el && el.focus()
-      }
-    }
+const enabledItems = computed(() => {
+  return props.options.filter(option => !option.disabled)
+})
 
-    function handleCallback(item: Item): void {
-      props.validation && props.validation.$touch()
+const dropdownOptions = useDropdown({
+  search: createDropdownSearchOptions(),
+  items: enabledItems,
+  closeOnClick: props.closeOnClick,
+  selected: computed(() => props.modelValue),
+  callback: handleCallback
+})
 
-      isArray(props.value) ? handleArray(item.value) : handlePrimitive(item.value)
-    }
+const selected = computed(() => {
+  return isArray(props.modelValue)
+    ? props.options.filter(o => (props.modelValue as unknown[]).includes(o.value))
+    : props.options.find(o => isEqual(o.value, props.modelValue))
+})
 
-    function handlePrimitive(value: unknown): void {
-      if (!isEqual(props.value, value)) {
-        emit('change', value)
+const hasSelected = computed(() => {
+  return isArray(selected.value)
+    ? selected.value.length > 0
+    : !isNullish(selected.value) && selected.value.value !== ''
+})
 
-        return
-      }
+function createDropdownSearchOptions(): UseDropdownSearchOptions | undefined {
+  if (props.search === false) {
+    return undefined
+  }
 
-      if (props.nullable) {
-        emit('change', null)
-      }
+  if (props.search === true) {
+    return {
+      placeholder: 'Search items',
+      missing: 'No items found.'
     }
+  }
 
-    function handleArray(value: unknown[]): void {
-      const difference = getDifference(props.value as unknown[], value)
+  return props.search
+}
 
-      if (!props.nullable && difference.length === 0) {
-        return
-      }
+async function handleOpen(): Promise<void> {
+  if (!props.disabled) {
+    open()
 
-      emit('change', difference)
-    }
+    await nextTick()
 
-    function getDifference(source: unknown[], value: unknown[]): unknown[] {
-      return source
-        .filter(item => !isEqual(item, value))
-        .concat(source.includes(value) ? [] : [value])
-    }
+    const el = document.querySelector<HTMLInputElement>('.SInputDropdown .SDropdown .search .SInputText input')
 
-    return {
-      classes,
-      container,
-      isOpen,
-      close,
-      dropdownOptions,
-      selected,
-      hasSelected,
-      handleOpen,
-      handleCallback
-    }
+    el && el.focus()
   }
-})
+}
+
+function handleCallback(item: Item): void {
+  props.validation && props.validation.$touch()
+
+  isArray(props.modelValue) ? handleArray(item.value) : handlePrimitive(item.value)
+}
+
+function handlePrimitive(value: unknown): void {
+  if (!isEqual(props.modelValue, value)) {
+    emit('update:modelValue', value)
+
+    return
+  }
+
+  if (props.nullable) {
+    emit('update:modelValue', null)
+  }
+}
+
+function handleArray(value: unknown[]): void {
+  const difference = getDifference(props.modelValue as unknown[], value)
+
+  if (!props.nullable && difference.length === 0) {
+    return
+  }
+
+  emit('update:modelValue', difference)
+}
+
+function getDifference(source: unknown[], value: unknown[]): unknown[] {
+  return source
+    .filter(item => !isEqual(item, value))
+    .concat(source.includes(value) ? [] : [value])
+}
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SInputDropdown.mini {
   .SInputDropdown-box {
     min-height: 32px;
@@ -251,53 +217,15 @@ export default defineComponent({
   }
 }
 
-.SInputDropdown.outlined {
-  .SInputDropdown-box {
-    border-color: var(--input-outlined-border);
-
-    &:hover {
-      border-color: var(--input-focus-border);
-    }
-
-    &:focus:not(:focus-visible) {
-      border-color: var(--input-focus-border);
-      outline: 0;
-    }
-  }
-
-  &.disabled .SInputDropdown-box {
-    background-color: var(--input-outlined-bg-disabled);
-    cursor: not-allowed;
-
-    &:hover                     { border-color: var(--input-outlined-border); }
-    &:focus:not(:focus-visible) { border-color: var(--input-outlined-border); }
-  }
-}
-
-.SInputDropdown.filled {
+.SInputDropdown.disabled {
   .SInputDropdown-box {
-    background-color: var(--input-filled-bg);
-
-    &:hover {
-      border-color: var(--input-focus-border);
-    }
-
-    &:focus:not(:focus-visible) {
-      border-color: var(--input-focus-border);
-      outline: 0;
-    }
-  }
-
-  &.disabled .SInputDropdown-box {
-    background-color: var(--input-outlined-bg-disabled);
+    background-color: var(--input-disabled-bg);
     cursor: not-allowed;
 
     &:hover                     { border-color: var(--input-outlined-border); }
     &:focus:not(:focus-visible) { border-color: var(--input-outlined-border); }
   }
-}
 
-.SInputDropdown.disabled {
   .SInputDropdown-box-icon {
     cursor: not-allowed;
   }
@@ -315,12 +243,22 @@ export default defineComponent({
 
 .SInputDropdown-box {
   position: relative;
-  border: 1px solid transparent;
+  border: 1px solid var(--input-border);
   border-radius: 4px;
   width: 100%;
   color: var(--input-text);
   cursor: pointer;
   transition: border-color .25s, background-color .25s;
+
+  &:hover {
+    border-color: var(--input-focus-border);
+  }
+
+  &:focus {
+    border-color: var(--input-focus-border);
+    outline: 0;
+  }
+
 }
 
 .SInputDropdown-box-placeholder {

package/lib/components/SInputDropdownItem.vue

@@ -3,7 +3,7 @@
     <div v-for="(i, index) in arrayItem" :key="index" class="item">
       <component
         :is="component(i)"
-        :mute="i.value === null"
+        :mute="shouldMute(i)"
         :item="i"
         :disabled="disabled"
         @remove="$emit('remove', i)"
@@ -12,51 +12,45 @@
   </div>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { isArray } from '../support/Util'
-import { Item } from '../composables/Dropdown'
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { isArray } from '../support/Utils'
 import SInputDropdownItemText from './SInputDropdownItemText.vue'
 import SInputDropdownItemTextTag from './SInputDropdownItemTextTag.vue'
 import SInputDropdownItemUser from './SInputDropdownItemUser.vue'
 import SInputDropdownItemUserTag from './SInputDropdownItemUserTag.vue'
 
-export default defineComponent({
-  props: {
-    item: { type: [Object, Array] as PropType<Item | Item[]>, required: true },
-    disabled: { type: Boolean, default: false }
-  },
-
-  setup(props) {
-    const isItemArray = computed(() => isArray(props.item))
+const props = defineProps({
+  item: { type: [Object, Array] as PropType<any>, default: null },
+  disabled: { type: Boolean, default: false }
+})
 
-    const arrayItem = computed(() => {
-      return isArray(props.item) ? props.item : [props.item]
-    })
+defineEmits(['remove'])
 
-    function component(item: Item) {
-      if (item.type === 'text') {
-        return isItemArray.value ? SInputDropdownItemTextTag : SInputDropdownItemText
-      }
+const isItemArray = computed(() => isArray(props.item))
 
-      if (item.type === 'user') {
-        return isItemArray.value ? SInputDropdownItemUserTag : SInputDropdownItemUser
-      }
+const arrayItem = computed(() => {
+  return isArray(props.item) ? props.item : [props.item]
+})
 
-      throw new Error('Invalid item type.')
-    }
+function component(item: any): any {
+  if (item.type === 'text') {
+    return isItemArray.value ? SInputDropdownItemTextTag : SInputDropdownItemText
+  }
 
-    return {
-      arrayItem,
-      component
-    }
+  if (item.type === 'user') {
+    return isItemArray.value ? SInputDropdownItemUserTag : SInputDropdownItemUser
   }
-})
+
+  throw new Error('Invalid item type.')
+}
+
+function shouldMute(item: any) {
+  return item.value === null
+}
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SInputDropdownItem {
   display: flex;
   flex-wrap: wrap;

package/lib/components/SInputDropdownItemText.vue

@@ -4,22 +4,17 @@
   </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: {
-    mute: { type: Boolean, default: false },
-    item: { type: Object as PropType<Item>, required: true },
-    disabled: { type: Boolean, default: false }
-  }
+const props = defineProps({
+  mute: { type: Boolean, default: false },
+  item: { type: Object as PropType<any>, required: true },
+  disabled: { type: Boolean, default: false }
 })
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SInputDropdownItemText.mute .text {
   color: var(--input-placeholder);
 }