@onereach/ui-components 19.3.0-beta.5046.0 → 19.3.0-beta.5083.0

package/src/components/or-stepper/partials/OrStepperOptionVertical.vue

@@ -1,108 +0,0 @@
-<template>
-  <li class="group">
-    <or-stepper-title
-      :option="option"
-      :complete-index="completeIndex"
-      :index="index"
-    >
-      <template v-slot:icon="scope">
-        <slot
-          name="icon"
-          v-bind="scope"
-        />
-      </template>
-      <template v-slot:label="scope">
-        <slot
-          name="label"
-          v-bind="scope"
-        />
-      </template>
-    </or-stepper-title>
-    <div class="min-h-[32px] w-full border-l-1 border-dashed border-x-primary ml-sm group-last:border-none">
-      <div
-        v-if="completeIndex===index"
-        class="px-sm"
-      >
-        <slot
-          :option="option"
-          :name="`content-${index}`"
-        />
-        <or-stepper-button-options
-          v-if="!isReadOnly"
-          :option="option"
-          :has-confirm-button="hasConfirmButton"
-          :has-skip-button="hasSkipButton"
-          :has-previous-button="hasPreviousButton"
-          :complete-index="completeIndex"
-          @confirm="$emit('confirm')"
-          @previous="$emit('previous')"
-          @skip="$emit('skip')"
-        >
-          <template v-slot:buttons="scope">
-            <slot
-              name="buttons"
-              v-bind="scope"
-            />
-          </template>
-        </or-stepper-button-options>
-      </div>
-    </div>
-  </li>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import OrStepperButtonOptions from './OrStepperButtonOptions.vue';
-import OrStepperTitle from './OrStepperTitle.vue';
-
-export default defineComponent({
-  name: 'OrStepperOptionVertical',
-
-  components: {
-    OrStepperButtonOptions,
-    OrStepperTitle,
-  },
-
-  props: {
-    type: {
-      type: String,
-      default: 'vertical',
-    },
-
-    completeIndex: {
-      type: Number,
-      default: 0,
-    },
-
-    index: {
-      type: Number,
-      default: 0,
-    },
-
-    hasSkipButton: {
-      type: Boolean,
-      default: true,
-    },
-
-    hasConfirmButton: {
-      type: Boolean,
-      default: true,
-    },
-
-    hasPreviousButton: {
-      type: Boolean,
-      default: true,
-    },
-
-    option: {
-      type: Object as PropType<{label: string;}>,
-      default: () => ({}),
-    },
-
-    isReadOnly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-});
-</script>

package/src/components/or-stepper/partials/OrStepperTitle.vue

@@ -1,66 +0,0 @@
-<template>
-  <div :class="['flex w-full gap-xs items-center', {'justify-around group': type==='horizontal'}]">
-    <hr
-      v-if="type==='horizontal'"
-      class="flex-1 border-t-1 border-dashed border-y-primary bottom-8 group-first:hidden"
-    >
-    <slot name="icon">
-      <status-icon :status-type="statusType" />
-    </slot>
-    <div>
-      <slot name="label">
-        <p :class="{'font-bold': completeIndex===index}">
-          {{ option.label }}
-        </p>
-      </slot>
-    </div>
-    <hr
-      v-if="type==='horizontal'"
-      class="flex-1 mr-2xs border-t-1 border-dashed border-y-primary group-last:hidden"
-    >
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import StatusIcon from './StatusIcon.vue';
-
-export default defineComponent({
-  name: 'OrStepperTitle',
-
-  components: {
-    StatusIcon,
-  },
-
-  props: {
-    option: {
-      type: Object as PropType<{label: string;}>,
-      default: () => ({}),
-    },
-
-    completeIndex: {
-      type: Number,
-      default: 0,
-    },
-
-    type: {
-      type: String,
-      default: 'vertical',
-    },
-
-    index: {
-      type: Number,
-      default: 0,
-    },
-  },
-
-  computed: {
-    statusType(): string {
-      if (this.index === this.completeIndex) return 'active';
-      if (this.index < this.completeIndex) return 'done';
-      return 'ready';
-    },
-  },
-});
-
-</script>

package/src/components/or-stepper/partials/StatusIcon.vue

@@ -1,80 +0,0 @@
-<template>
-  <div :class="['indication', statusType]">
-    <span class="material-icons icon">
-      {{ materialIcon }}
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'StatusIcon',
-  props: {
-    statusType: {
-      type: String,
-      default: 'active',
-    },
-  },
-
-  computed: {
-    materialIcon() {
-      switch (this.statusType) {
-        case 'failed':
-          return 'close';
-        case 'done':
-          return 'done';
-        default:
-          return '';
-      }
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@use '~@onereach/styles/src/global' as *;
-
-.indication {
-  display: flex;
-  width: $s-4;
-  height: $s-4;
-  border-radius: $s-3;
-
-  &.ready {
-    background-color: $c-neutral-1;
-    border: 1px solid $c-primary;
-  }
-
-  &.active {
-    background-color: $c-neutral-0;
-    border: 3px solid $c-primary;
-  }
-
-  &.selected {
-    background-color: $c-primary;
-  }
-
-  &.done {
-    background-color: $c-neutral-1;
-    border: 1px solid $c-primary;
-
-    .icon {
-      padding: 1px;
-      font-size: $fs-0;
-      color: $c-primary;
-    }
-  }
-
-  &.failed {
-    background-color: $c-error;
-
-    .icon {
-      padding: $s-1;
-      font-size: $fs-0;
-      color: $c-neutral-0;
-    }
-  }
-}
-</style>

package/src/components/or-switch/OrSwitch.vue

@@ -1,248 +0,0 @@
-<template>
-  <label :class="rootClasses">
-    <input
-      v-bind="$attrs"
-      :checked="isChecked"
-      :disabled="isDisabled"
-      :value="value"
-      type="checkbox"
-      class="or-switch--input visually-hidden"
-      @change="onChange"
-    >
-
-    <!--  Switcher  -->
-    <span class="or-switch--switcher">
-      <span class="or-switch--layer" />
-      <span class="or-switch--knob">
-        <transition name="fade">
-          <or-loader
-            v-show="isLoading"
-            class="or-switch--loader"
-          />
-        </transition>
-      </span>
-    </span>
-
-    <span class="or-switch--content">
-      <slot>{{ label }}</slot>
-    </span>
-  </label>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { OrLoader } from '../or-loader';
-
-export default defineComponent({
-  name: 'OrSwitch',
-  components: {
-    OrLoader,
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-  props: {
-    modelValue: {
-      type: null as any,
-      default: null,
-      required: false,
-    },
-    value: {
-      type: null as any,
-      default: null,
-      required: false,
-    },
-    label: {
-      type: String as PropType<string>,
-      default: '',
-      required: false,
-    },
-    isDisabled: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-      required: false,
-    },
-    isLoading: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-      required: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  computed: {
-    isArrayModelValue(): boolean {
-      return Array.isArray(this.modelValue);
-    },
-    isChecked(): boolean {
-      return this.isArrayModelValue
-        ? this.modelValue.some(this.value) || this.modelValue.includes(this.value)
-        : !!this.modelValue;
-    },
-    isInactive(): boolean {
-      return this.isLoading || this.isDisabled;
-    },
-    rootClasses(): any[] {
-      return [
-        'or-switch',
-        {
-          ['is-checked']: this.isChecked,
-          ['is-disabled']: this.isDisabled,
-          ['is-loading']: this.isLoading,
-        },
-      ];
-    },
-  },
-  methods: {
-    onChange({ target }: Event): void {
-      if (this.isInactive) return;
-      const isChecked = (target as HTMLInputElement).checked;
-      if (this.isArrayModelValue) {
-        const newValue = [...this.modelValue];
-
-        isChecked
-          ? newValue.push(this.value)
-          : newValue.splice(newValue.indexOf(this.value), 1);
-
-        this.$emit('update:modelValue', newValue);
-      } else {
-        this.$emit('update:modelValue', isChecked);
-      }
-    },
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@use "~@onereach/styles/src/utils" as *;
-@use "~@onereach/styles/src/variables/initial";
-
-@mixin is-checked() {
-  &.is-checked {
-    .or-switch {
-      &--layer {
-        background-color: var(--c-primary);
-      }
-
-      &--knob {
-        transform: translate(calc(100% - 3px), -50%);
-      }
-    }
-
-    @include hover {
-      .or-switch {
-        &--layer {
-          background-color: var(--c-primary-darken-3);
-        }
-      }
-    }
-
-    @include active {
-      .or-switch {
-        &--layer {
-          background-color: var(--c-primary-darken-5);
-        }
-      }
-    }
-  }
-}
-
-.or-switch {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-
-  &--switcher {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    min-height: px-to-rem(20);
-    margin-right: calc(0.5rem + 3px);
-    margin-left: 3px;
-  }
-
-  &--layer {
-    width: px-to-rem(34);
-    min-width: px-to-rem(34);
-    height: px-to-rem(14);
-    min-height: px-to-rem(14);
-    background-color: var(--c-neutral-2);
-    border-radius: initial.$round;
-
-    @include transition(background-color, opacity);
-  }
-
-  &--knob {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: px-to-rem(20);
-    min-width: px-to-rem(20);
-    height: px-to-rem(20);
-    min-height: px-to-rem(20);
-    background-color: var(--c-white);
-    border-radius: initial.$round;
-    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
-    transform: translate(-3px, -50%);
-
-    @include transition(transform, box-shadow);
-  }
-
-  &--content {
-    color: var(--c-neutral-6);
-
-    @include transition(color);
-  }
-
-  &--loader {
-    &.or-loader {
-      &::after {
-        width: calc(#{px-to-rem(20)} - #{px-to-rem(5)});
-        min-width: calc(#{px-to-rem(20)} - #{px-to-rem(5)});
-        height: calc(#{px-to-rem(20)} - #{px-to-rem(5)});
-        min-height: calc(#{px-to-rem(20)} - #{px-to-rem(5)});
-        border-color: var(--c-primary);
-      }
-    }
-  }
-
-  @include hover {
-    .or-switch {
-      &--layer {
-        background-color: var(--c-neutral-2-darken-3);
-      }
-    }
-  }
-
-  @include active {
-    .or-switch {
-      &--layer {
-        background-color: var(--c-neutral-2-darken-5);
-      }
-    }
-  }
-
-  @include disabled {
-    .or-switch {
-      &--layer {
-        opacity: 0.5;
-      }
-
-      &--knob {
-        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
-      }
-
-      &--content {
-        color: var(--c-neutral-4);
-      }
-    }
-  }
-
-  @include is-checked;
-  @include loading;
-}
-</style>

package/src/components/or-switch/index.ts

@@ -1 +0,0 @@
-export { default as OrSwitch } from './OrSwitch.vue';

package/src/components/or-switch-v3/OrSwitch.vue

@@ -1,222 +0,0 @@
-<template>
-  <div
-    :ref="'root'"
-    :class="rootStyles"
-  >
-    <template v-if="!loading">
-      <input
-        :ref="'control'"
-        v-bind="attributes"
-        :class="controlStyles"
-        :type="'checkbox'"
-        :checked="checked"
-        :required="required"
-        :disabled="disabled"
-        @change="$emit('change', $event); onChange()"
-        @click="$emit('click', $event)"
-        @focus="$emit('focus', $event)"
-        @blur="$emit('blur', $event)"
-      >
-    </template>
-
-    <template v-else>
-      <div
-        :class="loaderStyles"
-        :disabled="disabled"
-      >
-        <OrLoader
-          :variant="'circular'"
-          :color="'primary'"
-          :size="'m'"
-        />
-      </div>
-    </template>
-
-    <template v-if="$slots.default || label">
-      <OrLabel
-        :control-id="attributes.id"
-        :variant="labelVariant"
-        :selected="checked"
-        :required="required"
-        :disabled="disabled"
-      >
-        <slot>{{ label }}</slot>
-
-        <template v-slot:addon>
-          <slot name="addon" />
-        </template>
-      </OrLabel>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, computed, defineComponent, reactive, ref, toRef } from 'vue';
-import { useControlAttributes, useIdAttribute, useProxyModelValue } from '../../hooks';
-import { exclude, include, isArray, isUndefined } from '../../utils';
-import { LabelVariant, OrLabelV3 as OrLabel } from '../or-label-v3';
-import { OrLoaderV3 as OrLoader } from '../or-loader-v3';
-import { Switch, SwitchControl, SwitchControlHandle, SwitchLoader, SwitchLoaderHandle } from './styles';
-import { SwitchModelValue, SwitchValue } from './types';
-
-export default defineComponent({
-  name: 'OrSwitch',
-
-  components: {
-    OrLabel,
-    OrLoader,
-  },
-
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
-  props: {
-    modelValue: {
-      type: undefined as unknown as PropType<SwitchModelValue>,
-      default: undefined,
-    },
-
-    value: {
-      type: undefined as unknown as PropType<SwitchValue>,
-      default: undefined,
-    },
-
-    label: {
-      type: String,
-      default: undefined,
-    },
-
-    labelVariant: {
-      type: String as PropType<`${LabelVariant}`>,
-      default: () => LabelVariant.Toggle,
-    },
-
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-
-    required: {
-      type: Boolean,
-      default: false,
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-
-    'change',
-    'click',
-    'focus',
-    'blur',
-  ],
-
-  expose: [
-    'root',
-
-    'focus',
-    'blur',
-  ],
-
-  setup(props, context) {
-    const attributes = reactive({
-      id: useIdAttribute(),
-      ...useControlAttributes(),
-    });
-
-    // Refs & Styles
-    const root = ref<HTMLElement>();
-
-    const rootStyles = computed(() => [
-      'or-switch-v3',
-      ...Switch,
-    ]);
-
-    const control = ref<HTMLElement>();
-
-    const controlStyles = computed(() => [
-      ...SwitchControl,
-      ...SwitchControlHandle,
-    ]);
-
-    const loaderStyles = computed(() => [
-      ...SwitchLoader,
-      ...SwitchLoaderHandle,
-    ]);
-
-    // State
-    const model = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-
-    const checked = computed(() => {
-      if (isArray(model.value)) {
-        if (isUndefined(props.value)) {
-          throw new Error('[OrSwitch]: `value` must be specified.');
-        }
-
-        return model.value.includes(props.value);
-      }
-
-      return Boolean(model.value);
-    });
-
-    // Handlers
-    function onChange(): void {
-      if (isArray(model.value)) {
-        if (isUndefined(props.value)) {
-          throw new Error('[OrSwitch]: `value` must be specified.');
-        }
-
-        if (!checked.value) {
-          model.value = include(props.value, model.value);
-        } else {
-          model.value = exclude(props.value, model.value);
-        }
-      } else {
-        model.value = !model.value;
-      }
-    }
-
-    // Methods
-    function focus(): void {
-      control.value?.focus();
-    }
-
-    function blur(): void {
-      control.value?.blur();
-    }
-
-    return {
-      attributes,
-
-      root,
-      rootStyles,
-
-      control,
-      controlStyles,
-
-      loaderStyles,
-
-      checked,
-
-      onChange,
-
-      focus,
-      blur,
-    };
-  },
-});
-</script>
-
-<style scoped>
-input {
-  line-height: 0;
-  appearance: none;
-}
-</style>