@globalbrain/sefirot 0.71.0 → 2.0.0-draft.3

package/lib/components/SInputTextarea.vue

@@ -2,85 +2,62 @@
   <SInputBase
     class="SInputTextarea"
     :class="classes"
-    :name="name"
     :label="label"
     :note="note"
     :help="help"
+    :error-message="errorMessage"
     :validation="validation"
   >
-    <div class="container">
-      <textarea
-        :id="name"
-        class="input"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :value="value"
-        :rows="rows"
-        @input="emitInput"
-        @blur="emitBlur"
-      />
-    </div>
+    <textarea
+      class="input"
+      :placeholder="placeholder"
+      :rows="rows"
+      :disabled="disabled"
+      :value="modelValue ?? undefined"
+      @input="emitInput"
+      @blur="emitBlur"
+    />
   </SInputBase>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { SyntheticInputEvent } from '../types/Utils'
-import { Validation } from '../validation/Validation'
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
 type Size = 'mini' | 'small' | 'medium'
-type Mode = 'filled' | 'outlined' | 'clear'
-
-export default defineComponent({
-  components: {
-    SInputBase
-  },
-
-  props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
-    mode: { type: String as PropType<Mode>, default: 'filled' },
-    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 },
-    disabled: { type: Boolean, default: false },
-    rows: { type: Number, default: 3 },
-    value: { type: [String, Number], default: null },
-    validation: { type: Object as PropType<Validation>, default: null }
-  },
-
-  setup(props, { emit }) {
-    const classes = computed(() => [
-      props.size,
-      props.mode,
-      {
-        disabled: props.disabled
-      }
-    ])
-
-    function emitInput(e: SyntheticInputEvent): void {
-      emit('input', e.target.value)
-    }
-
-    function emitBlur(e: SyntheticInputEvent): void {
-      props.validation && props.validation.$touch()
-      emit('blur', e.target.value)
-    }
 
-    return {
-      classes,
-      emitInput,
-      emitBlur
-    }
-  }
+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 },
+  disabled: { type: Boolean, default: false },
+  rows: { type: Number, default: 3 },
+  errorMessage: { type: Boolean, default: true },
+  modelValue: { type: String as PropType<string | null>, default: null },
+  validation: { type: Object as PropType<Validatable>, default: null }
 })
+
+const emit = defineEmits(['update:modelValue'])
+
+const classes = computed(() => [
+  props.size,
+  { disabled: props.disabled }
+])
+
+function emitInput(e: Event): void {
+  emit('update:modelValue', (e.target as HTMLInputElement).value)
+}
+
+function emitBlur(e: FocusEvent): void {
+  props.validation?.$touch()
+  emit('update:modelValue', (e.target as HTMLInputElement).value)
+}
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .SInputTextarea.mini {
   .input {
     padding: 6px 12px;
@@ -111,58 +88,11 @@ export default defineComponent({
   }
 }
 
-.SInputTextarea.filled {
-  .input {
-    background-color: var(--input-filled-bg);
-
-    &:focus {
-      border-color: var(--input-focus-border);
-      background-color: var(--input-focus-bg);
-    }
-  }
-
-  &.disabled .input {
-    background-color: var(--input-filled-bg-disabled);
-  }
-}
-
-.SInputTextarea.outlined {
-  .input {
-    border-color: var(--input-outlined-border);
-    background-color: transparent;
-
-    &:hover {
-      border-color: var(--input-focus-border);
-    }
-
-    &:focus {
-      border-color: var(--input-focus-border);
-    }
-  }
-
-  &.disabled .input:hover {
-    border-color: var(--input-outlined-border);
-  }
-
-  &.disabled .input {
-    background-color: var(--input-outlined-bg-disabled);
-  }
-}
-
-.SInputTextarea.clear {
-  .input {
-    padding: 0;
-  }
-
-  &.disabled .input {
-    background-color: var(--input-clear-bg-disabled);
-  }
-}
-
 .SInputTextarea.disabled {
+  .input,
   .input:hover {
+    background-color: var(--input-disabled-bg);
     cursor: not-allowed;
-    border-color: transparent;
   }
 }
 
@@ -180,14 +110,25 @@ export default defineComponent({
 .input {
   display: block;
   flex-grow: 1;
-  border: 1px solid transparent;
+  border: 1px solid var(--input-border);
   border-radius: 4px;
   width: 100%;
   font-weight: 400;
+  background-color: transparent;
   transition: border-color .25s, background-color .25s;
 
   &::placeholder {
+    font-weight: 500;
     color: var(--input-placeholder);
   }
+
+  &:hover {
+    border-color: var(--input-hover-border);
+  }
+
+  &:focus {
+    border-color: var(--input-focus-border);
+    background-color: transparent;
+  }
 }
 </style>

package/lib/components/SInputYMD.vue

@@ -1,8 +1,7 @@
 <template>
   <SInputBase
     class="SInputYMD"
-    :class="[size, mode, { disabled }]"
-    :name="name"
+    :class="[size, { disabled }]"
     :label="label"
     :note="note"
     :help="help"
@@ -14,7 +13,7 @@
         v-if="year"
         class="input year"
         type="number"
-        :value="value && value.year"
+        :value="modelValue?.year"
         placeholder="YYYY"
         :disabled="disabled"
         @blur="updateYear"
@@ -27,7 +26,7 @@
         v-if="month"
         class="input month"
         type="number"
-        :value="value && value.month"
+        :value="modelValue?.month"
         placeholder="M"
         :disabled="disabled"
         @blur="updateMonth"
@@ -40,143 +39,120 @@
         v-if="date"
         class="input date"
         type="number"
-        :value="value && value.date"
+        :value="modelValue?.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'
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
-export type Mode = 'outlined'
+type Size = 'mini' | 'small' | 'medium'
 
-export interface Value {
+interface Value {
   year?: number
   month?: number
   date?: number
 }
 
-export type ValueType = 'year' | 'month' | 'date'
+type ValueType = 'year' | 'month' | 'date'
 
-export interface Fields {
+interface Fields {
   year?: boolean
   month?: boolean
   date?: boolean
 }
 
-export default defineComponent({
-  components: {
-    SInputBase
-  },
-
-  props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
-    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
-    }
+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 },
+  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 },
+  modelValue: { type: Object as PropType<Value>, default: null },
+  validation: { type: Object as PropType<Validatable>, default: null }
+})
 
-    function updateYear(e: SyntheticInputEvent): void {
-      const value = Number(e.target.value)
-      update('year', value === 0 ? undefined : value)
-    }
+const emit = defineEmits(['update:modelValue'])
 
-    function updateMonth(e: SyntheticInputEvent): void {
-      const value = Number(e.target.value)
-      update('month', value === 0 ? undefined : value)
-    }
+const touched = {
+  year: false,
+  month: false,
+  date: false
+}
 
-    function updateDate(e: SyntheticInputEvent): void {
-      const value = Number(e.target.value)
-      update('date', value === 0 ? undefined : value)
-    }
+function updateYear(e: FocusEvent): void {
+  const value = Number((e.target as HTMLInputElement).value)
+  update('year', value === 0 ? undefined : value)
+}
 
-    function update(type: ValueType, value?: number): void {
-      const data = { ...props.value } as Value
+function updateMonth(e: FocusEvent): void {
+  const value = Number((e.target as HTMLInputElement).value)
+  update('month', value === 0 ? undefined : value)
+}
 
-      setValue(data, type, value)
+function updateDate(e: FocusEvent): void {
+  const value = Number((e.target as HTMLInputElement).value)
+  update('date', value === 0 ? undefined : value)
+}
 
-      data.year === undefined && data.month === undefined && data.date === undefined
-        ? emit('input', null)
-        : emit('input', data)
+function update(type: ValueType, value?: number): void {
+  const data = { ...props.modelValue } as Value
 
-      emitTouch(type)
-    }
+  setValue(data, type, value)
 
-    function setValue(data: Value, type: ValueType, value?: number): void {
-      if (value === undefined) {
-        delete data[type]
-        return
-      }
+  data.year === undefined && data.month === undefined && data.date === undefined
+    ? emit('update:modelValue', null)
+    : emit('update:modelValue', data)
 
-      data[type] = value
-    }
+  emitTouch(type)
+}
 
-    function emitTouch(type: ValueType): void {
-      if (!props.validation || props.validation.$isDirty.value) {
-        return
-      }
+function setValue(data: Value, type: ValueType, value?: number): 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 {
-      updateYear,
-      updateMonth,
-      updateDate
+  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";
-
 .SInputYMD.mini {
   .container {
     padding: 0 4px;
@@ -211,8 +187,8 @@ export default defineComponent({
   }
 
   .input.year  { width: 56px; }
-  .input.month { width: 32px; }
-  .input.date  { width: 32px; }
+  .input.month { width: 40px; }
+  .input.date  { width: 40px; }
 
   .separator {
     padding: 7px 0;
@@ -233,8 +209,8 @@ export default defineComponent({
   }
 
   .input.year  { width: 56px; }
-  .input.month { width: 32px; }
-  .input.date  { width: 32px; }
+  .input.month { width: 40px; }
+  .input.date  { width: 40px; }
 
   .separator {
     padding: 11px 0;
@@ -263,8 +239,14 @@ export default defineComponent({
 }
 
 .SInputYMD.disabled {
-  .container { cursor: not-allowed; }
-  .input     { cursor: not-allowed; }
+  .container,
+  .input {
+    cursor: not-allowed;
+  }
+
+  .container {
+    background-color: var(--input-disabled-bg);
+  }
 }
 
 .SInputYMD.has-error {
@@ -274,7 +256,14 @@ export default defineComponent({
 }
 
 .container {
-  display: flex;
+  display: inline-flex;
+  border: 1px solid var(--input-border);
+  border-radius: 4px;
+  transition: border-color .25s;
+
+  &:hover {
+    border-color: var(--input-focus-border);
+  }
 }
 
 .input {

package/lib/components/SLink.vue

@@ -8,65 +8,29 @@
     :target="target"
     :rel="rel"
   >
-    <slot /><SIconExternalLink v-if="showExternal" class="SLink-icon" />
+    <slot />
   </component>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api'
-import SIconExternalLink from './icons/SIconExternalLink.vue'
+<script setup lang="ts">
+import { computed } from 'vue'
 
-const OUTBOUND_REGEX = /^[a-z]+:/i
-
-export default defineComponent({
-  components: {
-    SIconExternalLink
-  },
-
-  props: {
-    href: { type: String, default: null },
-    icon: { type: Boolean, default: false }
-  },
-
-  setup(props) {
-    const isExternal = computed(() => OUTBOUND_REGEX.test(props.href))
-
-    const component = computed(() => {
-      if (!props.href) {
-        return 'span'
-      }
-
-      return isExternal.value ? 'a' : 'nuxt-link'
-    })
+const props = defineProps({
+  href: { type: String, default: null }
+})
 
-    const target = computed(() => isExternal.value ? '_blank' : null)
-    const rel = computed(() => isExternal.value ? 'noopener noreferrer' : null)
+const OUTBOUND_REGEX = /^[a-z]+:/i
 
-    const showExternal = computed(() => isExternal.value && props.icon)
+const isExternal = computed(() => OUTBOUND_REGEX.test(props.href))
 
-    return {
-      component,
-      target,
-      rel,
-      showExternal
-    }
+const component = computed(() => {
+  if (!props.href) {
+    return 'span'
   }
-})
-</script>
 
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SLink {
-  display: inline-flex;
-  align-items: center;
-}
+  return isExternal.value ? 'a' : 'router-link'
+})
 
-.SLink-icon {
-  display: inline-block;
-  margin-left: .3em;
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-}
-</style>
+const target = computed(() => isExternal.value ? '_blank' : null)
+const rel = computed(() => isExternal.value ? 'noopener noreferrer' : null)
+</script>