@onereach/ui-components 4.7.4-beta.2870.0 → 4.7.4

package/src/components/or-tag-input-v3/OrTagInput.vue

@@ -1,296 +0,0 @@
-<template>
-  <div
-    ref="root"
-    :class="rootStyles"
-  >
-    <template v-if="label">
-      <OrLabel
-        :control-id="controlAttributes.id"
-        :variant="'input'"
-        :required="required"
-        :disabled="disabled"
-      >
-        {{ label }}
-
-        <template v-slot:addon>
-          <slot name="addon" />
-        </template>
-      </OrLabel>
-    </template>
-
-    <OrInputBox
-      :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
-      :size="size"
-      :invalid="!!error"
-      :readonly="readonly"
-      :disabled="disabled"
-    >
-      <OrTags
-        :items="proxyModelValue"
-        :tag-props="{
-          variant: readonly || disabled ? 'tag' : 'reset',
-          disabled: disabled
-        }"
-        @reset="remove($event)"
-      />
-
-      <input
-        ref="control"
-        v-model="draftModelValue"
-        v-bind="controlAttributes"
-        :class="controlStyles"
-        :type="'text'"
-        :placeholder="!proxyModelValue.length ? placeholder : undefined"
-        :readonly="readonly"
-        :disabled="disabled"
-        :autocomplete="'off'"
-        :minlength="undefined"
-        :maxlength="undefined"
-        @keydown.enter="add()"
-        @keydown="$emit('keydown', $event)"
-        @keyup="$emit('keyup', $event)"
-        @focus="$emit('focus', $event)"
-        @blur="$emit('blur', $event)"
-      >
-
-      <template v-slot:addon>
-        <template v-if="proxyModelValue.length > 0 || draftModelValue">
-          <OrIconButton
-            :icon="'close'"
-            :color="'inherit'"
-            :disabled="readonly || disabled"
-            @click.stop="reset()"
-          />
-        </template>
-      </template>
-    </OrInputBox>
-
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
-      <template v-if="hint || maxLength">
-        <OrHint :disabled="disabled">
-          {{ hint }}
-
-          <template
-            v-if="maxLength"
-            v-slot:addon
-          >
-            {{ currentLength }} / {{ maxLength }}
-          </template>
-        </OrHint>
-      </template>
-    </div>
-
-    <div
-      v-show="typeof error === 'string'"
-      :class="['contents']"
-    >
-      <OrError :disabled="disabled">
-        {{ error }}
-
-        <template
-          v-if="maxLength"
-          v-slot:addon
-        >
-          {{ currentLength }} / {{ maxLength }}
-        </template>
-      </OrError>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, computed, defineComponent, reactive, ref } from 'vue-demi';
-import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
-import { OrErrorV3 as OrError } from '../or-error-v3';
-import { OrHintV3 as OrHint } from '../or-hint-v3';
-import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
-import { OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
-import { OrLabelV3 as OrLabel } from '../or-label-v3';
-import { OrTagsV3 as OrTags } from '../or-tags-v3';
-import { TagInputSize } from './props';
-import { TagInput, TagInputControl, TagInputItem } from './styles';
-
-export default defineComponent({
-  name: 'OrTagInput',
-
-  components: {
-    OrError,
-    OrHint,
-    OrIconButton,
-    OrInputBox,
-    OrLabel,
-    OrTags,
-  },
-
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue',
-  },
-
-  props: {
-    modelValue: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-
-    size: {
-      type: String as PropType<`${TagInputSize}`>,
-      default: TagInputSize.M,
-    },
-
-    label: {
-      type: String,
-      default: undefined,
-    },
-
-    placeholder: {
-      type: String,
-      default: undefined,
-    },
-
-    hint: {
-      type: String,
-      default: undefined,
-    },
-
-    error: {
-      type: [String, Boolean],
-      default: undefined,
-    },
-
-    required: {
-      type: Boolean,
-      default: false,
-    },
-
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    disableDefaultStyles: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-
-    'keydown',
-    'keyup',
-    'focus',
-    'blur',
-  ],
-
-  expose: [
-    'root',
-
-    'focus',
-    'blur',
-  ],
-
-  setup(props, context) {
-    // Refs
-    const root = ref<HTMLElement>();
-    const control = ref<HTMLInputElement>();
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-tag-input-v3',
-      ...TagInput,
-    ]);
-
-    const controlStyles = computed(() => [
-      ...TagInputControl,
-    ]);
-
-    const itemStyles = computed(() => [
-      ...TagInputItem,
-    ]);
-
-    // State
-    const controlAttributes = reactive({
-      id: useIdAttribute(),
-      ...useControlAttributes(),
-      ...useValidationAttributes(),
-    });
-
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-
-      set: (value) => {
-        context.emit('update:modelValue', value);
-      },
-    });
-
-    const draftModelValue = ref<string>();
-
-    const currentLength = computed(() => proxyModelValue.value?.length ?? 0);
-    const maxLength = computed(() => controlAttributes.maxlength);
-
-    // Methods
-    function focus(): void {
-      control.value?.focus();
-    }
-
-    function blur(): void {
-      control.value?.blur();
-    }
-
-    function add(): void {
-      const newItem = draftModelValue.value?.trim();
-
-      if (!newItem) return;
-      if (proxyModelValue.value.includes(newItem)) return;
-      if (maxLength.value && currentLength.value >= maxLength.value) return;
-
-      proxyModelValue.value = [...proxyModelValue.value, newItem];
-      draftModelValue.value = undefined;
-    }
-
-    function remove(value: string): void {
-      proxyModelValue.value = proxyModelValue.value.filter((item) => item !== value);
-    }
-
-    function reset(): void {
-      proxyModelValue.value = [];
-      draftModelValue.value = undefined;
-    }
-
-    return {
-      root,
-      control,
-      rootStyles,
-      controlStyles,
-      itemStyles,
-      controlAttributes,
-      proxyModelValue,
-      draftModelValue,
-      currentLength,
-      maxLength,
-      focus,
-      blur,
-      add,
-      remove,
-      reset,
-    };
-  },
-});
-</script>
-
-<style scoped>
-input {
-  min-width: 0;
-  background: none;
-  outline: none;
-}
-</style>

package/src/components/or-tag-input-v3/index.ts

@@ -1,2 +0,0 @@
-export { default as OrTagInputV3 } from './OrTagInput.vue';
-export * from './props';

package/src/components/or-tag-input-v3/props.ts

@@ -1 +0,0 @@
-export { InputBoxSize as TagInputSize } from '../or-input-box-v3';

package/src/components/or-tag-input-v3/styles.ts

@@ -1,24 +0,0 @@
-export const TagInput: string[] = [
-  // Layout
-  'layout-column',
-
-  // Spacing
-  'gap-xs',
-];
-
-export const TagInputControl: string[] = [
-  // Layout
-  'flex-auto',
-
-  // Typography
-  'typography-inherit',
-
-  // Theme (placeholder)
-  'placeholder:theme-foreground-outline',
-  'dark:placeholder:theme-foreground-outline-dark',
-];
-
-export const TagInputItem: string[] = [
-  // Box
-  '!min-h-0',
-];