@globalbrain/sefirot 0.70.0 → 2.0.0-draft.1

package/lib/components/SInputDropdownItemTextTag.vue

@@ -10,26 +10,19 @@
   </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'
 import SIconX from './icons/SIconX.vue'
 
-export default defineComponent({
-  components: {
-    SIconX
-  },
-
-  props: {
-    item: { type: Object as PropType<Item>, required: true },
-    disabled: { type: Boolean, default: false }
-  }
+defineProps({
+  item: { type: Object as PropType<any>, required: true },
+  disabled: { type: Boolean, default: false }
 })
+
+defineEmits(['remove'])
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SInputDropdownItemTextTag {
   display: flex;
   border-radius: 12px;
@@ -37,7 +30,7 @@ export default defineComponent({
   background-color: var(--c-white-mute);
 }
 
-.dark-mode .SInputDropdownItemTextTag {
+.dark .SInputDropdownItemTextTag {
   background-color: var(--c-black-mute);
 }
 
@@ -50,7 +43,7 @@ export default defineComponent({
   }
 }
 
-.dark-mode .SInputDropdownItemTextTag.disabled {
+.dark .SInputDropdownItemTextTag.disabled {
   background-color: var(--c-gray-dark-2);
 }
 
@@ -76,7 +69,7 @@ export default defineComponent({
   }
 }
 
-.dark-mode .remove {
+.dark .remove {
   &:hover .remove-box {
     background-color: var(--c-gray-dark-2)
   }

package/lib/components/SInputDropdownItemUser.vue

@@ -8,26 +8,18 @@
   </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 },
-    disabled: { type: Boolean, default: false }
-  }
+defineProps({
+  item: { type: Object as PropType<UserItem>, required: true },
+  disabled: { type: Boolean, default: false }
 })
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SInputDropdownItemUser {
   position: relative;
 }

package/lib/components/SInputDropdownItemUserTag.vue

@@ -16,28 +16,21 @@
   </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 SIconX from './icons/SIconX.vue'
 import SAvatar from './SAvatar.vue'
 
-export default defineComponent({
-  components: {
-    SIconX,
-    SAvatar
-  },
-
-  props: {
-    item: { type: Object as PropType<UserItem>, required: true },
-    disabled: { type: Boolean, default: false }
-  }
+defineProps({
+  item: { type: Object as PropType<UserItem>, required: true },
+  disabled: { type: Boolean, default: false }
 })
+
+defineEmits(['remove'])
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SInputDropdownItemUserTag {
   display: flex;
   border-radius: 12px;
@@ -50,7 +43,7 @@ export default defineComponent({
   background-color: var(--c-gray-light-4);
 }
 
-.dark-mode .SInputDropdownItemUserTag {
+.dark .SInputDropdownItemUserTag {
   background-color: var(--c-black-mute);
 }
 
@@ -82,7 +75,7 @@ export default defineComponent({
   }
 }
 
-.dark-mode .remove {
+.dark .remove {
   &:hover .remove-box {
     background-color: var(--c-gray-dark-2)
   }

package/lib/components/SInputFile.vue

@@ -2,7 +2,6 @@
   <SInputBase
     class="SInputFile"
     :class="classes"
-    :name="name"
     :label="label"
     :note="note"
     :help="help"
@@ -13,7 +12,7 @@
       ref="input"
       class="input"
       type="file"
-      @change="e => handleChange(e.target.files[0])"
+      @change="handleChange"
     >
 
     <div class="box" role="button" @click="open">
@@ -31,63 +30,49 @@
   </SInputBase>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, ref, computed } from '@vue/composition-api'
-import { Validation } from '../validation/Validation'
+<script setup lang="ts">
+import { PropType, ref, computed } from 'vue'
+import { Validation, Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 type Size = 'mini' | 'small' | 'medium'
 
-export default defineComponent({
-  components: {
-    SInputBase
-  },
-
-  props: {
-    size: { type: String as PropType<Size>, default: 'small' },
-    name: { type: String, default: null },
-    label: { type: String, default: null },
-    note: { type: String, default: null },
-    text: { type: String, default: 'Choose File' },
-    help: { type: String, default: null },
-    placeholder: { type: String, default: null },
-    errorMessage: { type: Boolean, default: true },
-    value: { type: File, default: null },
-    validation: { type: Object as PropType<Validation>, default: null }
-  },
-
-  setup(props, { emit }) {
-    const input = ref<HTMLInputElement | null>(null)
-
-    const classes = computed(() => [props.size])
-
-    const fileName = computed(() => {
-      return props.value ? props.value.name : null
-    })
-
-    function open(): void {
-      input.value!.click()
-    }
+const props = defineProps({
+  size: { type: String as PropType<Size>, default: 'small' },
+  label: { type: String, default: null },
+  note: { type: String, default: null },
+  text: { type: String, default: 'Choose File' },
+  help: { type: String, default: null },
+  placeholder: { type: String, default: null },
+  errorMessage: { type: Boolean, default: true },
+  modelValue: { type: Object as PropType<File | null>, default: null },
+  validation: { type: Object as PropType<Validatable>, default: null }
+})
 
-    function handleChange(file?: File): void {
-      emit('input', file ?? null)
-      file && props.validation?.$touch()
-    }
+const emit = defineEmits(['update:modelValue'])
 
-    return {
-      input,
-      classes,
-      fileName,
-      open,
-      handleChange
-    }
-  }
+const input = ref<HTMLInputElement | null>(null)
+
+const classes = computed(() => [props.size])
+
+const fileName = computed(() => {
+  return props.modelValue ? props.modelValue.name : null
 })
+
+function open(): void {
+  input.value!.click()
+}
+
+function handleChange(e: Event): void {
+  const file = (e.target as any).files[0]
+
+  emit('update:modelValue', file ?? null)
+
+  file && props.validation?.$touch()
+}
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SInputFile.mini {
   .action {
     padding: 2px 8px 2px 2px;
@@ -167,13 +152,13 @@ export default defineComponent({
 
 .box {
   display: flex;
-  border: 1px solid var(--input-outlined-border);
+  border: 1px solid var(--input-border);
   border-radius: 4px;
   cursor: pointer;
   transition: border-color .25s;
 
   &:hover {
-    border-color: var(--input-outlined-border-focus);
+    border-color: var(--input-focus-border);
 
     .button {
       background-color: var(--c-gray-light-4);
@@ -181,7 +166,7 @@ export default defineComponent({
   }
 }
 
-.dark-mode .box {
+.dark .box {
   &:hover {
     .button {
       background-color: var(--c-gray-dark-3);
@@ -201,7 +186,7 @@ export default defineComponent({
   transition: background-color .25s;
 }
 
-.dark-mode .button {
+.dark .button {
   background-color: var(--c-black-mute);
   transition: background-color .25s;
 }

package/lib/components/SInputHMS.vue

@@ -1,8 +1,7 @@
 <template>
   <SInputBase
     class="SInputHMS"
-    :class="[size, mode, { disabled }]"
-    :name="name"
+    :class="[size, { disabled }]"
     :label="label"
     :note="note"
     :help="help"
@@ -13,7 +12,7 @@
       <input
         v-if="hour"
         class="input hour"
-        :value="value && value.hour"
+        :value="modelValue?.hour ?? null"
         placeholder="00"
         :disabled="disabled"
         @blur="updateHour"
@@ -22,7 +21,7 @@
       <input
         v-if="minute"
         class="input minute"
-        :value="value && value.minute"
+        :value="modelValue?.minute ?? null"
         placeholder="00"
         :disabled="disabled"
         @blur="updateMinute"
@@ -31,7 +30,7 @@
       <input
         v-if="second"
         class="input second"
-        :value="value && value.second"
+        :value="modelValue?.second ?? null"
         placeholder="00"
         :disabled="disabled"
         @blur="updateSecond"
@@ -44,14 +43,13 @@
   </SInputBase>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
+<script setup lang="ts">
+import { PropType } from 'vue'
 import { SyntheticInputEvent } from '../types/Utils'
-import { Validation } from '../validation/Validation'
+import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 type Size = 'mini' | 'small' | 'medium'
-type Mode = 'outlined'
 
 interface Value {
   hour?: string
@@ -67,120 +65,104 @@ export interface Fields {
   second?: boolean
 }
 
-export default defineComponent({
-  components: {
-    SInputBase
-  },
-
-  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 },
-    hour: { type: Boolean, default: true },
-    minute: { type: Boolean, default: true },
-    second: { 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 = {
-      hour: false,
-      minute: false,
-      second: false
-    }
+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 },
+  hour: { type: Boolean, default: true },
+  minute: { type: Boolean, default: true },
+  second: { 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 }
+})
 
-    function updateHour(e: SyntheticInputEvent): void {
-      const value = getValue(e.target.value)
+const emit = defineEmits(['update:modelValue'])
 
-      update('hour', value)
-    }
+const touched = {
+  hour: false,
+  minute: false,
+  second: false
+}
 
-    function updateMinute(e: SyntheticInputEvent): void {
-      const value = getValue(e.target.value)
+function updateHour(e: FocusEvent): void {
+  const value = getValue((e.target as HTMLInputElement).value)
 
-      update('minute', value ? value.padStart(2, '0') : undefined)
-    }
+  update('hour', value)
+}
 
-    function updateSecond(e: SyntheticInputEvent): void {
-      const value = getValue(e.target.value)
+function updateMinute(e: FocusEvent): void {
+  const value = getValue((e.target as HTMLInputElement).value)
 
-      update('second', value ? value.padStart(2, '0') : undefined)
-    }
+  update('minute', value ? value.padStart(2, '0') : undefined)
+}
 
-    function update(type: ValueType, value?: string): void {
-      const data = { ...props.value } as Value
+function updateSecond(e: FocusEvent): void {
+  const value = getValue((e.target as HTMLInputElement).value)
 
-      setValue(data, type, value)
+  update('second', value ? value.padStart(2, '0') : undefined)
+}
 
-      data.hour === undefined && data.minute === undefined && data.second === undefined
-        ? emit('input', null)
-        : emit('input', data)
+function update(type: ValueType, value?: string): void {
+  const data = { ...props.modelValue } as Value
 
-      emitTouch(type)
-    }
+  setValue(data, type, value)
 
-    function getValue(value: string): string | undefined {
-      if (value === '') {
-        return undefined
-      }
+  data.hour === undefined && data.minute === undefined && data.second === undefined
+    ? emit('update:modelValue', null)
+    : emit('update:modelValue', data)
 
-      const input = Number(value)
+  emitTouch(type)
+}
 
-      return isNaN(input) ? undefined : String(input)
-    }
+function getValue(value: string): string | undefined {
+  if (value === '') {
+    return undefined
+  }
 
-    function setValue(data: Value, type: ValueType, value?: string): void {
-      if (value === undefined) {
-        delete data[type]
-        return
-      }
+  const input = Number(value)
 
-      data[type] = value
-    }
+  return isNaN(input) ? undefined : String(input)
+}
 
-    function emitTouch(type: ValueType): void {
-      if (!props.validation || props.validation.$isDirty.value) {
-        return
-      }
+function setValue(data: Value, type: ValueType, value?: string): void {
+  if (value === undefined) {
+    delete data[type]
+    return
+  }
 
-      touched[type] = true
+  data[type] = value
+}
 
-      if (createRequiredTouched().every(v => v)) {
-        props.validation.$touch()
-      }
-    }
+function emitTouch(type: ValueType): void {
+  if (!props.validation || props.validation.$dirty) {
+    return
+  }
 
-    function createRequiredTouched(): boolean[] {
-      const requiredTouched = [] as boolean[]
+  touched[type] = true
 
-      for (const key in touched) {
-        if ((props as any)[key]) {
-          requiredTouched.push((touched as any)[key])
-        }
-      }
+  if (createRequiredTouched().every(v => v)) {
+    props.validation.$touch()
+  }
+}
 
-      return requiredTouched
-    }
+function createRequiredTouched(): boolean[] {
+  const requiredTouched = [] as boolean[]
 
-    return {
-      updateHour,
-      updateMinute,
-      updateSecond
+  for (const key in touched) {
+    if ((props as any)[key]) {
+      requiredTouched.push((touched as any)[key])
     }
   }
-})
+
+  return requiredTouched
+}
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SInputHMS.mini {
   .container {
     padding: 0 8px;
@@ -251,30 +233,18 @@ export default defineComponent({
   }
 }
 
-.SInputHMS.outlined {
-  .container {
-    border: 1px solid var(--input-outlined-border);
-    border-radius: 4px;
-    transition: border-color .25s;
-
-    &:hover {
-      border-color: var(--input-focus-border);
-    }
+.SInputHMS.disabled {
+  .container,
+  .input {
+    cursor: not-allowed;
   }
-}
 
-.SInputHMS.outlined.disabled {
   .container {
-    border-color: var(--input-outlined-border);
-    background-color: var(--input-outlined-bg-disabled);
+    border-color: var(--input-border);
+    background-color: var(--input-disabled-bg);
   }
 }
 
-.SInputHMS.disabled {
-  .container { cursor: not-allowed; }
-  .input     { cursor: not-allowed; }
-}
-
 .SInputHMS.has-error {
   .container {
     border-color: var(--c-danger);
@@ -283,6 +253,13 @@ export default defineComponent({
 
 .container {
   display: inline-flex;
+  border: 1px solid var(--input-border);
+  border-radius: 4px;
+  transition: border-color .25s;
+
+  &:hover {
+    border-color: var(--input-focus-border);
+  }
 }
 
 .input {