@globalbrain/sefirot 0.72.0 → 2.0.0-draft.4

package/lib/components/SInputCheckboxes.vue

@@ -1,87 +0,0 @@
-<template>
-  <SInputBase
-    class="SInputCheckboxes"
-    :class="[size]"
-    :name="name"
-    :label="label"
-    :note="note"
-    :help="help"
-  >
-    <div class="container">
-      <div class="row">
-        <div v-for="option in options" :key="option.value" class="col">
-          <SInputCheckbox
-            :text="option.label"
-            :value="isChecked(option.value)"
-            @change="handleChange(option.value)"
-          />
-        </div>
-      </div>
-    </div>
-  </SInputBase>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import SInputBase from './SInputBase.vue'
-import SInputCheckbox from './SInputCheckbox.vue'
-
-type Size = 'mini' | 'small' | 'medium'
-
-export default defineComponent({
-  components: {
-    SInputBase,
-    SInputCheckbox
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-
-  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 },
-    options: { type: Array, required: true },
-    value: { type: Array, required: true }
-  },
-
-  setup(props, { emit }) {
-    function isChecked(value: unknown): boolean {
-      return props.value.includes(value)
-    }
-
-    function handleChange(value: unknown): void {
-      const distinct = props.value
-        .filter(v => v !== value)
-        .concat(props.value.includes(value) ? [] : [value])
-
-      emit('change', distinct)
-    }
-
-    return {
-      isChecked,
-      handleChange
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.container {
-  display: flex;
-}
-
-.row {
-  margin: -2px -8px;
-}
-
-.col {
-  padding: 2px 8px;
-}
-</style>

package/lib/components/SInputDate.vue

@@ -1,192 +0,0 @@
-<template>
-  <SInputBase
-    class="SInputDate"
-    :class="classes"
-    :name="name"
-    :label="label"
-    :note="note"
-    :help="help"
-    :validation="validation"
-  >
-    <div class="container">
-      <ClientOnly>
-        <v-date-picker
-          v-slot="{ inputValue, inputEvents }"
-          :value="value"
-          color="blue"
-          is-dark
-          :masks="{ input: 'YYYY-MM-DD' }"
-          :model-config="{ type: 'string', mask: 'YYYY-MM-DD' }"
-          :popover="{ placement: 'bottom', visibility: 'click' }"
-          @input="emitInput"
-        >
-          <input
-            :id="name"
-            class="input"
-            type="text"
-            :placeholder="placeholder"
-            :disabled="disabled"
-            :value="inputValue"
-            autocomplete="off"
-            v-on="inputEvents"
-            @blur="emitBlur"
-          >
-        </v-date-picker>
-      </ClientOnly>
-    </div>
-  </SInputBase>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { SyntheticInputEvent } from '../types/Utils'
-import { Validation } from '../validation/Validation'
-import SInputBase from './SInputBase.vue'
-
-type Size = 'medium' | 'mini'
-type Mode = 'filled' | 'outlined'
-
-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: 'YYYY-MM-DD' },
-    disabled: { type: Boolean, default: false },
-    value: { type: String, 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(date: string | null) {
-      emit('input', date)
-    }
-
-    function emitBlur(e: SyntheticInputEvent) {
-      setTimeout(() => {
-        props.validation && props.validation.$touch()
-        emit('blur', e.target.value)
-      }, 100)
-    }
-
-    return {
-      classes,
-      emitInput,
-      emitBlur
-    }
-  }
-})
-</script>
-
-<style lang="postcss" scoped>
-@import "@/assets/styles/variables";
-
-.SInputDate.mini {
-  .input {
-    padding: 3px 12px;
-    width: 100%;
-    line-height: 24px;
-    font-size: 14px;
-  }
-
-  .container {
-    height: 32px;
-  }
-}
-
-.SInputDate.medium {
-  .input {
-    padding: 11px 16px;
-    width: 100%;
-    line-height: 24px;
-    font-size: 16px;
-  }
-
-  .container {
-    height: 48px;
-  }
-}
-
-.SInputDate.has-error {
-  .input {
-    border-color: var(--c-danger);
-
-    &:focus {
-      border-color: var(--c-danger);
-    }
-  }
-}
-
-.SInputDate.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);
-  }
-}
-
-.SInputDate.outlined {
-  .input {
-    border-color: var(--input-outlined-border);
-
-    &:focus {
-      border-color: var(--input-focus-border);
-      background-color: var(--input-focus-bg);
-    }
-  }
-
-  &.disabled .input:hover {
-    border-color: var(--input-outlined-border);
-  }
-
-  &.disabled .input {
-    background-color: var(--input-outlined-bg-disabled);
-  }
-}
-
-.SInputDate.disabled {
-  .input:hover {
-    cursor: not-allowed;
-    border-color: transparent;
-  }
-}
-
-.SInputDate >>> .vc-popover-content-wrapper {
-  z-index: var(--z-index-dropdown);
-}
-
-.input {
-  display: block;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  width: 100%;
-  color: var(--input-text);
-  transition: border-color .25s, background-color .25s;
-
-  &::placeholder {
-    color: var(--input-placeholder);
-  }
-}
-</style>

package/lib/components/SInputDay.vue

@@ -1,87 +0,0 @@
-<template>
-  <SInputDropdown
-    class="SInputday"
-    :size="size"
-    :mode="mode"
-    :name="name"
-    :label="label"
-    :note="note"
-    :placeholder="placeholder"
-    :help="help"
-    :search="search"
-    :nullable="nullable"
-    :options="options"
-    :close-on-click="closeOnClick"
-    :validation="validation"
-    :value="value"
-    @change="v => $emit('change', v)"
-  />
-</template>
-
-<script lang="ts">
-import day from 'dayjs'
-import { PropType, defineComponent, computed } from '@vue/composition-api'
-import { TextItem, useSearch, useTextOption } from '../composables/InputDropdown'
-import SInputDropdown from './SInputDropdown.vue'
-
-type Size = 'mini' | 'medium'
-type Mode = 'filled' | 'outlined'
-
-export default defineComponent({
-  components: {
-    SInputDropdown
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-
-  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 },
-    nullable: { type: Boolean, default: true },
-    closeOnClick: { type: Boolean, default: true },
-    year: { type: Number, default: null },
-    month: { type: Number, default: null },
-    validation: { type: Object, default: null },
-    value: { type: [String, Number, Boolean, Array, Object] as PropType<any>, default: null }
-  },
-
-  setup(props) {
-    const search = useSearch({
-      placeholder: 'Search dates',
-      missing: 'No dates found.'
-    })
-
-    const options = computed(() => {
-      const year = props.year ?? 2019
-      const month = props.month ?? 1
-
-      const range = day().year(year).month(month - 1).date(1).endOf('month').date()
-
-      const dates: TextItem[] = []
-
-      for (let i = 1; i <= range; i++) {
-        dates.push(useTextOption({ value: i, text: String(i) }))
-      }
-
-      if (props.nullable) {
-        dates.unshift(useTextOption({ value: null, text: 'Select date' }))
-      }
-
-      return dates
-    })
-
-    return {
-      search,
-      options
-    }
-  }
-})
-</script>

package/lib/components/SInputMonth.vue

@@ -1,86 +0,0 @@
-<template>
-  <SInputDropdown
-    class="SInputMonth"
-    :size="size"
-    :mode="mode"
-    :name="name"
-    :label="label"
-    :note="note"
-    :placeholder="placeholder"
-    :help="help"
-    :search="search"
-    :nullable="nullable"
-    :disabled="disabled"
-    :options="options"
-    :close-on-click="closeOnClick"
-    :validation="validation"
-    :value="value"
-    @change="v => $emit('change', v)"
-  />
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from '@vue/composition-api'
-import { useSearch, useTextOption } from '../composables/InputDropdown'
-import SInputDropdown from './SInputDropdown.vue'
-
-type Size = 'mini' | 'medium'
-type Mode = 'filled' | 'outlined'
-
-export default defineComponent({
-  components: {
-    SInputDropdown
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-
-  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 },
-    nullable: { type: Boolean, default: true },
-    closeOnClick: { type: Boolean, default: true },
-    disabled: { type: Boolean, default: false },
-    validation: { type: Object, default: null },
-    value: { type: [String, Number, Boolean, Array, Object] as PropType<any>, default: null }
-  },
-
-  setup(props) {
-    const search = useSearch({
-      placeholder: 'Search months',
-      missing: 'No months found.'
-    })
-
-    const options = [
-      useTextOption({ value: 1, text: 'January' }),
-      useTextOption({ value: 2, text: 'February' }),
-      useTextOption({ value: 3, text: 'March' }),
-      useTextOption({ value: 4, text: 'April' }),
-      useTextOption({ value: 5, text: 'May' }),
-      useTextOption({ value: 6, text: 'June' }),
-      useTextOption({ value: 7, text: 'July' }),
-      useTextOption({ value: 8, text: 'August' }),
-      useTextOption({ value: 9, text: 'September' }),
-      useTextOption({ value: 10, text: 'October' }),
-      useTextOption({ value: 11, text: 'November' }),
-      useTextOption({ value: 12, text: 'December' })
-    ]
-
-    if (props.nullable) {
-      options.unshift(useTextOption({ value: null, text: 'Select month' }))
-    }
-
-    return {
-      search,
-      options
-    }
-  }
-})
-</script>