@globalbrain/sefirot 0.71.0 → 2.0.0-draft.3

package/lib/components/SInputNumber.vue

@@ -2,121 +2,42 @@
   <SInputText
     class="SInputNumber"
     :size="size"
-    :mode="mode"
-    :name="name"
+    type="number"
     :label="label"
     :note="note"
     :help="help"
-    type="number"
     :placeholder="placeholder"
-    :align="align"
-    :text="text"
-    :text-after="textAfter"
-    :action="action"
-    :color="color"
-    :step="step"
     :disabled="disabled"
-    :validation="validation"
-    :display-value="displayValue"
-    :value="value"
     :error-message="errorMessage"
-    @input="emitInput"
-    @blur="emitBlur"
-    @enter="emitEnter"
-    @action="$emit('action')"
-  >
-    <template #before-help>
-      <p v-if="helpFormat" class="help-text">
-        {{ valueWithSeparator }}
-      </p>
-    </template>
-  </SInputText>
+    :model-value="modelValue"
+    :validation="validation"
+    @update:model-value="emitUpdate"
+  />
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { isNullish } from '../support/Util'
-import { Validation } from '../validation/Validation'
-import SInputText, { Size, Mode, Align, Color, Action } from './SInputText.vue'
-
-export default defineComponent({
-  components: {
-    SInputText
-  },
-
-  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 },
-    align: { type: String as PropType<Align>, default: null },
-    text: { type: String, default: null },
-    textAfter: { type: String, default: null },
-    action: { type: Object as PropType<Action>, default: null },
-    color: { type: Function as PropType<(value: number) => Color>, default: null },
-    step: { type: Number, default: 1 },
-    separator: { type: Boolean, default: false },
-    helpFormat: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    errorMessage: { type: Boolean, default: true },
-    value: { type: Number, default: null },
-    validation: { type: Object as PropType<Validation>, default: null }
-  },
-
-  setup(props, { emit }) {
-    const valueWithSeparator = computed(() => {
-      if (isNullish(props.value)) {
-        return '0'
-      }
-
-      return props.value >= 100000000000000000000
-        ? 'The number is too big'
-        : props.value.toLocaleString('en-US', { maximumFractionDigits: 20 })
-    })
-
-    const displayValue = computed(() => {
-      if (!props.separator) {
-        return null
-      }
-
-      return valueWithSeparator.value !== '0' ? valueWithSeparator.value : null
-    })
-
-    function emitInput(value: number): void {
-      emit('input', value)
-    }
-
-    function emitBlur(value: number): void {
-      emit('blur', value)
-    }
-
-    function emitEnter(value: number): void {
-      emit('enter', value)
-    }
-
-    return {
-      valueWithSeparator,
-      displayValue,
-      emitInput,
-      emitBlur,
-      emitEnter
-    }
-  }
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { isNullish } from '../support/Utils'
+import { Validation, Validatable } from '../composables/Validation'
+import SInputText from './SInputText.vue'
+
+type Size = 'mini' | 'small' | 'medium'
+
+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 },
+  errorMessage: { type: Boolean, default: true },
+  modelValue: { type: Number as PropType<number | null>, default: null },
+  validation: { type: Object as PropType<Validatable>, default: null }
 })
-</script>
 
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
+const emit = defineEmits(['update:modelValue'])
 
-.SInputNumber-help-format {
-  margin: 0;
-  padding: 6px 0 0;
-  line-height: 20px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--input-help);
+function emitUpdate(value: string | null): void {
+  emit('update:modelValue', value ? Number(value): null)
 }
-</style>
+</script>

package/lib/components/SInputRadio.vue

@@ -1,13 +1,15 @@
 <template>
   <SInputBase
     class="SInputRadio"
-    :name="name"
+    :class="[size]"
     :label="label"
     :note="note"
     :help="help"
+    :error-message="errorMessage"
+    :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" />
         </div>
@@ -18,44 +20,32 @@
   </SInputBase>
 </template>
 
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { Validation } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 
-export default defineComponent({
-  components: {
-    SInputBase
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
+type Size = 'mini' | 'small' | 'medium'
+
+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 },
+  errorMessage: { type: Boolean, default: true },
+  modelValue: { type: Boolean, required: true },
+  validation: { type: Object as PropType<Validation>, default: null }
+})
 
-  props: {
-    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 }
-  },
+const emit = defineEmits(['update:modelValue'])
 
-  setup(props, { emit }) {
-    function emitChange(): void {
-      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/SInputRadios.vue

@@ -2,18 +2,19 @@
   <SInputBase
     class="SInputRadios"
     :class="[size]"
-    :name="name"
     :label="label"
     :note="note"
     :help="help"
+    :error-message="errorMessage"
+    :validation="validation"
   >
     <div class="container">
       <div class="row">
-        <div v-for="option in options" :key="option.value" class="col">
+        <div v-for="(option, index) in options" :key="index" class="col">
           <SInputRadio
             :text="option.label"
-            :value="isChecked(option.value)"
-            @change="handleChange(option.value)"
+            :model-value="isChecked(option.value)"
+            @update:model-value="handleChange(option.value)"
           />
         </div>
       </div>
@@ -21,63 +22,52 @@
   </SInputBase>
 </template>
 
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { Validatable } from '../composables/Validation'
 import SInputBase from './SInputBase.vue'
 import SInputRadio from './SInputRadio.vue'
 
-export type Size = 'mini' | 'small' | 'medium'
+type Size = 'mini' | 'small' | 'medium'
 
-export default defineComponent({
-  components: {
-    SInputBase,
-    SInputRadio
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
+interface Option {
+  label: string
+  value: string | number | boolean
+}
 
-  props: {
-    size: { type: String as PropType<Size>, default: 'medium' },
-    name: { type: String, default: null },
-    label: { type: String, default: null },
-    note: { type: String, default: null },
-    help: { type: String, default: null },
-    nullable: { type: Boolean, default: true },
-    options: { type: Array, required: true },
-    value: { type: [String, Number, Boolean], default: null }
-  },
+const props = defineProps({
+  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 },
+  nullable: { type: Boolean, default: true },
+  options: { type: Array as PropType<any[]>, required: true },
+  errorMessage: { type: Boolean, default: true },
+  modelValue: { type: [String, Number, Boolean], default: null },
+  validation: { type: Object as PropType<Validatable>, default: null }
+})
 
-  setup(props, { emit }) {
-    function isChecked(value: unknown): boolean {
-      return value === props.value
-    }
+const emit = defineEmits(['update:modelValue'])
 
-    function handleChange(value: unknown): void {
-      if (value !== props.value) {
-        emit('change', value)
+function isChecked(value: string | number | boolean) {
+  return value === props.modelValue
+}
 
-        return
-      }
+function handleChange(value: string | number | boolean) {
+  if (value !== props.modelValue) {
+    emit('update:modelValue', value)
 
-      if (props.nullable) {
-        emit('change', null)
-      }
-    }
+    return
+  }
 
-    return {
-      isChecked,
-      handleChange
-    }
+  if (props.nullable) {
+    emit('update:modelValue', null)
   }
-})
+}
 </script>
 
 <style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
 .container {
   display: flex;
 }