@onereach/ui-components 10.3.2 → 10.3.3-beta.4312.0

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

@@ -48,6 +48,7 @@
             {{ item.label }}
           </slot>
         </template>
+
         <template
           v-if="showControl"
           v-slot:tail
@@ -90,32 +91,14 @@
       </template>
     </OrInputBox>
 
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
-      <template v-if="$slots.hint || hint || maxLength">
-        <OrHint :disabled="disabled">
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-
-          <template
-            v-if="maxLength"
-            v-slot:addon
-          >
-            {{ currentLength }} / {{ maxLength }}
-          </template>
-        </OrHint>
-      </template>
-    </div>
-
-    <div
-      v-show="typeof error === 'string' && error.length > 0"
-      :class="['contents']"
-    >
-      <OrError :disabled="disabled">
-        {{ error }}
+    <template v-if="$slots.hint || hint || maxLength">
+      <OrHint
+        v-show="!error"
+        :disabled="disabled"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
 
         <template
           v-if="maxLength"
@@ -123,8 +106,22 @@
         >
           {{ currentLength }} / {{ maxLength }}
         </template>
-      </OrError>
-    </div>
+      </OrHint>
+    </template>
+
+    <OrError
+      v-show="typeof error === 'string' && error.length > 0"
+      :disabled="disabled"
+    >
+      {{ error }}
+
+      <template
+        v-if="maxLength"
+        v-slot:addon
+      >
+        {{ currentLength }} / {{ maxLength }}
+      </template>
+    </OrError>
   </div>
 </template>
 
@@ -132,6 +129,7 @@
 import { MaybeElementRef, onClickOutside } from '@vueuse/core';
 import { PropType, computed, defineComponent, nextTick, reactive, ref, toRefs, watch } from 'vue-demi';
 import { useControlAttributes, useIdAttribute, useProxyModelValue, useValidationAttributes } from '../../hooks';
+import { exclude } from '../../utils';
 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';
@@ -161,7 +159,7 @@ export default defineComponent({
   props: {
     modelValue: {
       type: Array as PropType<string[]>,
-      default: (): [] => [],
+      default: [] as string[],
     },
 
     label: {
@@ -228,6 +226,7 @@ export default defineComponent({
     'keyup',
     'focus',
     'blur',
+
     'reset',
   ],
 
@@ -347,7 +346,7 @@ export default defineComponent({
     }
 
     function remove(value: string): void {
-      proxyModelValue.value = proxyModelValue.value.filter((item) => item !== value);
+      proxyModelValue.value = exclude(value, proxyModelValue.value);
     }
 
     function reset(): void {

package/src/components/or-textarea-v3/OrTextarea.vue

@@ -46,32 +46,14 @@
       />
     </OrInputBox>
 
-    <div
-      v-show="!error"
-      :class="['contents']"
-    >
-      <template v-if="$slots.hint || hint || maxLength">
-        <OrHint :disabled="disabled">
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-
-          <template
-            v-if="maxLength"
-            v-slot:addon
-          >
-            {{ length }} / {{ maxLength }}
-          </template>
-        </OrHint>
-      </template>
-    </div>
-
-    <div
-      v-show="typeof error === 'string' && error.length > 0"
-      :class="['contents']"
-    >
-      <OrError :disabled="disabled">
-        {{ error }}
+    <template v-if="$slots.hint || hint || maxLength">
+      <OrHint
+        v-show="!error"
+        :disabled="disabled"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
 
         <template
           v-if="maxLength"
@@ -79,8 +61,22 @@
         >
           {{ length }} / {{ maxLength }}
         </template>
-      </OrError>
-    </div>
+      </OrHint>
+    </template>
+
+    <OrError
+      v-show="typeof error === 'string' && error.length > 0"
+      :disabled="disabled"
+    >
+      {{ error }}
+
+      <template
+        v-if="maxLength"
+        v-slot:addon
+      >
+        {{ length }} / {{ maxLength }}
+      </template>
+    </OrError>
   </div>
 </template>
 

package/src/components/or-time-picker-v3/OrTimePicker.vue

@@ -98,21 +98,23 @@
       </template>
     </OrInputBox>
 
-    <template v-if="!error">
-      <template v-if="$slots.hint || hint">
-        <OrHint :disabled="disabled">
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-        </OrHint>
-      </template>
+    <template v-if="$slots.hint || hint">
+      <OrHint
+        v-show="!error"
+        :disabled="disabled"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </OrHint>
     </template>
 
-    <template v-if="typeof error === 'string'">
-      <OrError :disabled="disabled">
-        {{ error }}
-      </OrError>
-    </template>
+    <OrError
+      v-show="typeof error === 'string' && error.length > 0"
+      :disabled="disabled"
+    >
+      {{ error }}
+    </OrError>
   </div>
 </template>
 

package/src/components/or-time-range-picker-v3/OrTimeRangePicker.vue

@@ -137,21 +137,23 @@
       </template>
     </OrInputBox>
 
-    <template v-if="!error">
-      <template v-if="$slots.hint || hint">
-        <OrHint :disabled="disabled">
-          <slot name="hint">
-            {{ hint }}
-          </slot>
-        </OrHint>
-      </template>
+    <template v-if="$slots.hint || hint">
+      <OrHint
+        v-show="!error"
+        :disabled="disabled"
+      >
+        <slot name="hint">
+          {{ hint }}
+        </slot>
+      </OrHint>
     </template>
 
-    <template v-if="typeof error === 'string'">
-      <OrError :disabled="disabled">
-        {{ error }}
-      </OrError>
-    </template>
+    <OrError
+      v-show="typeof error === 'string' && error.length > 0"
+      :disabled="disabled"
+    >
+      {{ error }}
+    </OrError>
   </div>
 </template>
 

package/src/helpers/getItemByValue.ts

@@ -0,0 +1,12 @@
+import { Item } from '../types';
+import { isUndefined } from '../utils';
+
+export const getItemByValue = <T>(value: T, items: Item<T>[]): Item<T> => {
+  const item = items.find((item) => value === item.value);
+
+  if (isUndefined(item)) {
+    throw new Error('[getItemByValue]: Item not found.');
+  }
+
+  return item;
+};

package/src/helpers/getItemsByValue.ts

@@ -0,0 +1,6 @@
+import { getItemByValue } from '.';
+import { Item } from '../types';
+
+export const getItemsByValue = <T>(value: T[], items: Item<T>[]): Item<T>[] => {
+  return value.map((value) => getItemByValue(value, items));
+};

package/src/helpers/index.ts

@@ -0,0 +1,3 @@
+export * from './getItemByValue';
+export * from './getItemsByValue';
+export * from './searchItemsByLabel';

package/src/helpers/searchItemsByLabel.ts

@@ -0,0 +1,5 @@
+import { Item } from '../types';
+
+export const searchItemsByLabel = async <T>(value: string, items: Item<T>[]): Promise<Item<T>[]> => {
+  return items.filter((item) => new RegExp(value, 'i').test(item.label));
+};

package/src/hooks/useDateMask.ts

@@ -31,7 +31,7 @@ export function useDateMask(format: Ref<`${DateFormat}`>, locale: Ref<`${Locale}
               return mask + 'MMMM';
 
             default:
-              throw new Error();
+              throw new Error('[useDateMask]: `format` has an invalid value.');
           }
 
         case 'day':

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './directives';
+export * from './helpers';
 export * from './hooks';
 export * from './tokens';
 export * from './types';

package/src/types/Group.ts

@@ -0,0 +1,6 @@
+export type Group<T> = {
+  label: string;
+  items: T[];
+
+  disabled?: boolean;
+};

package/src/types/GroupFunction.ts

@@ -0,0 +1 @@
+export type GroupFunction<T> = (value: T) => string;

package/src/types/Item.ts

@@ -0,0 +1,6 @@
+export type Item<T> = {
+  label: string;
+  value: T;
+
+  disabled?: boolean;
+};

package/src/types/SearchFunction.ts

@@ -0,0 +1 @@
+export type SearchFunction<T> = (value: string, items: T[]) => Promise<T[]>;

package/src/types/index.ts

@@ -1,4 +1,8 @@
 export * from './DateFormat';
 export * from './FilterFunction';
+export * from './Group';
+export * from './GroupFunction';
+export * from './Item';
 export * from './Locale';
+export * from './SearchFunction';
 export * from './TimeFormat';

package/src/utils/exclude.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns a copy of the `items` array, excluding the `value`.
+ */
+export const exclude = <T>(value: T, items: T[]): typeof items => {
+  return items.filter((item) => item !== value);
+};

package/src/utils/include.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns a copy of the `items` array, including the `value`.
+ */
+export const include = <T>(value: T, items: T[]): typeof items => {
+  return items.concat(value);
+};

package/src/utils/index.ts

@@ -2,12 +2,14 @@ export * from './constants/color';
 export * from './constants/key-codes';
 export * from './constants/poper';
 export * from './constants/regex';
+export * from './exclude';
 export * from './functions/color';
 export * from './functions/dom';
 export * from './functions/flattenDeep';
 export * from './functions/hash';
 export * from './functions/px-to-rem';
 export * from './functions/text';
+export * from './include';
 export * from './isAncestor';
 export * from './isArray';
 export * from './isDescendant';
@@ -20,3 +22,4 @@ export * from './isObject';
 export * from './isString';
 export * from './isUndefined';
 export * from './isVisible';
+export * from './toArray';

package/src/utils/isAncestor.ts

@@ -1,13 +1,16 @@
-export function isAncestor(element: Element, reference: Element): boolean {
-  const { parentElement } = reference;
+/**
+ * Determines whether the `a` element is an ancestor of the `b` element.
+ */
+export const isAncestor = (a: Element, b: Element): boolean => {
+  const { parentElement } = b;
 
   if (!parentElement) {
     return false;
   }
 
-  if (element === parentElement) {
+  if (a === parentElement) {
     return true;
   }
 
-  return isAncestor(element, parentElement);
-}
+  return isAncestor(a, parentElement);
+};

package/src/utils/isArray.ts

@@ -1,3 +1,6 @@
-export function isArray(value: unknown): value is Array<unknown> {
+/**
+ * Determines whether the `value` is an array literal.
+ */
+export const isArray = (value: unknown): value is Array<unknown> => {
   return Array.isArray(value);
-}
+};

package/src/utils/isDescendant.ts

@@ -1,13 +1,16 @@
-export function isDescendant(element: Element, reference: Element): boolean {
-  const { parentElement } = element;
+/**
+ * Determines whether the `a` element is a descendant of the `b` element.
+ */
+export const isDescendant = (a: Element, b: Element): boolean => {
+  const { parentElement } = a;
 
   if (!parentElement) {
     return false;
   }
 
-  if (reference === parentElement) {
+  if (b === parentElement) {
     return true;
   }
 
-  return isDescendant(element, parentElement);
-}
+  return isDescendant(parentElement, b);
+};

package/src/utils/isEmpty.ts

@@ -1,9 +1,9 @@
-import { isArray } from './isArray';
-import { isNil } from './isNil';
-import { isObject } from './isObject';
-import { isString } from './isString';
+import { isArray, isNil, isObject, isString } from '.';
 
-export function isEmpty(value: unknown): boolean {
+/**
+ * Determines whether the `value` is an empty object, an empty array, a zero-length string, `null`, or `undefined`.
+ */
+export const isEmpty = (value: unknown): boolean => {
   if (isNil(value)) {
     return true;
   }
@@ -21,4 +21,4 @@ export function isEmpty(value: unknown): boolean {
   }
 
   return false;
-}
+};

package/src/utils/isEqual.ts

@@ -1,7 +1,9 @@
-import { isArray } from './isArray';
-import { isObject } from './isObject';
+import { isArray, isObject } from '.';
 
-export function isEqual(a: unknown, b: unknown): boolean {
+/**
+ * Determines whether `a` and `b` are the same value (makes shallow comparison of arrays and objects).
+ */
+export const isEqual = (a: unknown, b: unknown): boolean => {
   if (Object.is(a, b)) {
     return true;
   }
@@ -18,4 +20,4 @@ export function isEqual(a: unknown, b: unknown): boolean {
   }
 
   return false;
-}
+};

package/src/utils/isNil.ts

@@ -1,6 +1,8 @@
-import { isNull } from './isNull';
-import { isUndefined } from './isUndefined';
+import { isNull, isUndefined } from '.';
 
-export function isNil(value: unknown): value is null | undefined {
+/**
+ * Determines whether the `value` is `null` or `undefined`.
+ */
+export const isNil = (value: unknown): value is null | undefined => {
   return isNull(value) || isUndefined(value);
-}
+};

package/src/utils/isNull.ts

@@ -1,3 +1,6 @@
-export function isNull(value: unknown): value is null {
+/**
+ * Determines whether the `value` is `null`.
+ */
+export const isNull = (value: unknown): value is null => {
   return value === null;
-}
+};

package/src/utils/isNumber.ts

@@ -1,3 +1,6 @@
-export function isNumber(value: unknown): value is number {
+/**
+ * Determines whether the `value` is a number.
+ */
+export const isNumber = (value: unknown): value is number => {
   return typeof value === 'number';
-}
+};

package/src/utils/isObject.ts

@@ -1,3 +1,6 @@
-export function isObject(value: unknown): value is Record<PropertyKey, unknown> {
+/**
+ * Determines whether the `value` is an object literal.
+ */
+export const isObject = (value: unknown): value is Record<PropertyKey, unknown> => {
   return typeof value === 'object' && value?.constructor === Object;
-}
+};

package/src/utils/isString.ts

@@ -1,3 +1,6 @@
-export function isString(value: unknown): value is string {
+/**
+ * Determines whether the `value` is a string.
+ */
+export const isString = (value: unknown): value is string => {
   return typeof value === 'string';
-}
+};

package/src/utils/isUndefined.ts

@@ -1,3 +1,6 @@
-export function isUndefined(value: unknown): value is undefined {
+/**
+ * Determines whether the `value` is `undefined`.
+ */
+export const isUndefined = (value: unknown): value is undefined => {
   return value === undefined;
-}
+};

package/src/utils/isVisible.ts

@@ -1,3 +1,3 @@
-export function isVisible(element: Element): boolean {
+export const isVisible = (element: Element): boolean => {
   return element.getClientRects().length > 0;
-}
+};

package/src/utils/toArray.ts

@@ -0,0 +1,16 @@
+import { isArray, isNil } from '.';
+
+/**
+ * Converts the `value` to an array literal.
+ */
+export const toArray = <T>(value: T | T[]): T[] => {
+  if (isNil(value)) {
+    return [];
+  }
+
+  if (isArray(value)) {
+    return value;
+  }
+
+  return [value];
+};

package/dist/bundled/v2/components/OrSelectV3/utils/castToMultipleValue.d.ts

@@ -1,2 +0,0 @@
-import { SelectValue } from '../types';
-export declare function castToMultipleValue(value: SelectValue): SelectValue[];

package/dist/bundled/v2/components/OrSelectV3/utils/castToMultipleValue.js

@@ -1,10 +0,0 @@
-import { isEmpty } from '../../../utils/isEmpty.js';
-
-function castToMultipleValue(value) {
-  if (Array.isArray(value)) {
-    return value;
-  }
-  return isEmpty(value) ? [] : [value];
-}
-
-export { castToMultipleValue };

package/dist/bundled/v3/components/OrSelectV3/utils/castToMultipleValue.d.ts

@@ -1,2 +0,0 @@
-import { SelectValue } from '../types';
-export declare function castToMultipleValue(value: SelectValue): SelectValue[];

package/dist/bundled/v3/components/OrSelectV3/utils/castToMultipleValue.js

@@ -1,2 +0,0 @@
-import '../../../utils/isEmpty.js';
-export { c as castToMultipleValue } from '../../OrSelectV3-b1418e70.js';

package/dist/esm/v2/components/or-select-v3/utils/castToMultipleValue.d.ts

@@ -1,2 +0,0 @@
-import { SelectValue } from '../types';
-export declare function castToMultipleValue(value: SelectValue): SelectValue[];

package/dist/esm/v2/isAncestor-9e33bd15.js

@@ -1,14 +0,0 @@
-function isAncestor(element, reference) {
-  const {
-    parentElement
-  } = reference;
-  if (!parentElement) {
-    return false;
-  }
-  if (element === parentElement) {
-    return true;
-  }
-  return isAncestor(element, parentElement);
-}
-
-export { isAncestor as i };

package/dist/esm/v2/isEmpty-181a6611.js

@@ -1,27 +0,0 @@
-import { a as isNil, i as isArray } from './isNil-33299e1d.js';
-
-function isObject(value) {
-  return typeof value === 'object' && (value === null || value === void 0 ? void 0 : value.constructor) === Object;
-}
-
-function isString(value) {
-  return typeof value === 'string';
-}
-
-function isEmpty(value) {
-  if (isNil(value)) {
-    return true;
-  }
-  if (isString(value)) {
-    return value.length === 0;
-  }
-  if (isArray(value)) {
-    return value.length === 0;
-  }
-  if (isObject(value)) {
-    return Object.keys(value).length === 0;
-  }
-  return false;
-}
-
-export { isObject as a, isString as b, isEmpty as i };

package/dist/esm/v2/isNil-33299e1d.js

@@ -1,17 +0,0 @@
-function isArray(value) {
-  return Array.isArray(value);
-}
-
-function isNull(value) {
-  return value === null;
-}
-
-function isUndefined(value) {
-  return value === undefined;
-}
-
-function isNil(value) {
-  return isNull(value) || isUndefined(value);
-}
-
-export { isNil as a, isNull as b, isUndefined as c, isArray as i };

package/dist/esm/v3/components/or-select-v3/utils/castToMultipleValue.d.ts

@@ -1,2 +0,0 @@
-import { SelectValue } from '../types';
-export declare function castToMultipleValue(value: SelectValue): SelectValue[];