x-ui-design 1.0.31-gamma.1 → 1.0.33

package/lib/components/Upload/style.css

@@ -0,0 +1,151 @@
+.xUi-upload-wrapper {
+    width: 100%;
+    font-family: Arial, sans-serif;
+}
+
+.xUi-upload {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #666;
+    transition: all 0.3s;
+    text-align: center;
+}
+
+.xUi-upload:hover {
+    border-color: var(--xui-primary-color, var(--xui-primary-color));
+    color: var(--xui-primary-color, var(--xui-primary-color));
+}
+
+.xUi-upload-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.xUi-upload-disabled .xUi-upload-picture button {
+    cursor: not-allowed;
+}
+
+.xUi-upload-input {
+    display: none;
+}
+
+.xUi-upload-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.xUi-upload-list-picture .xUi-upload-item {
+    padding: 8px;
+    margin-top: 8px;
+    line-height: unset;
+    border: 1px dashed var(--xui-border-color);
+}
+
+.xUi-upload-list-picture .xUi-upload-item-done {
+    border: 1px solid var(--xui-border-color);
+}
+
+.xUi-upload-list-picture .xUi-upload-item-error {
+    border: 1px solid var(--xui-error-color);
+}
+
+.xUi-upload-list-picture .xUi-upload-item-error .xUi-upload-item-title {
+    color: var(--xui-error-color);
+}
+
+.xUi-upload-item {
+    display: flex;
+    gap: 8px;
+    margin: 0;
+    line-height: 35px;
+    align-items: center;
+    font-size: 14px;
+    color: #333;
+    border-radius: 8px;
+    transition: background 0.3s;
+}
+
+.xUi-upload-item.uploading {
+    color: var(--xui-primary-color);
+}
+
+.xUi-upload-item.done {
+    color: var(--xui-success-color);
+}
+
+.xUi-upload-item.error {
+    color: var(--xui-error-color);
+}
+
+.xUi-upload-remove {
+    color: rgba(0, 0, 0, 0.45);
+}
+
+.xUi-upload-item-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--xui-text-color);
+}
+
+.xUi-upload-item-title svg {
+    color: var(--xui-error-color);
+}
+
+.xUi-upload-list-picture-card {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.xUi-upload-list-picture-card .xUi-upload-item {
+    width: 104px;
+    height: 104px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+}
+
+.xUi-upload-list-picture-card .xUi-upload-item img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+}
+
+.xUi-upload-list-picture-card .xUi-upload-remove {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    color: #fff;
+    font-size: 12px;
+    padding: 2px 6px;
+    border-radius: 50%;
+    line-height: 1;
+}
+
+.xUi-upload-item-thumbnail {
+    width: 44px;
+    height: 44px;
+    object-fit: cover;
+    border-radius: 4px;
+}
+
+.xUi-upload-item-progress-line {
+    border: 1px solid var(--xui-border-color);
+    height: 0;
+    width: calc(100% - 8px);
+}
+
+.xUi-upload-item-progress-line-percent {
+    border: 1px solid red;
+    height: 0;
+    position: relative;
+    top: -2px;
+}

package/lib/global.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/lib/helpers/flatten.ts

@@ -0,0 +1,26 @@
+import {
+    Children,
+    Fragment,
+    isValidElement,
+    ReactElement,
+    ReactNode,
+    Suspense
+} from 'react';
+
+export function flattenChildren(children: ReactNode): ReactElement[] {
+    const result: ReactElement[] = [];
+
+    Children.forEach(children, child => {
+        if (!isValidElement(child)) return;
+
+        if (child.type === Fragment || child.type === Suspense) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            result.push(...flattenChildren(child.props.children));
+        } else {
+            result.push(child);
+        }
+    });
+
+    return result;
+}

package/lib/helpers/index.ts

@@ -0,0 +1,52 @@
+import { RuleType } from '../types';
+
+export const parseValue = (value: RuleType): RuleType => {
+  if (value === 'true') {
+    return true;
+  }
+
+  if (value === 'false') {
+    return false;
+  }
+
+  if (!isNaN(Number(value))) {
+    return Number(value);
+  }
+
+  return value;
+};
+
+export function createArray(length: number): number[] {
+  return Array.from({ length }, (_, index) => index);
+}
+
+export function clsx(...args: RuleType[]): string {
+  return args
+    .flatMap(arg => {
+      if (!arg) {
+        return [];
+      }
+
+      if (typeof arg === 'string') {
+        return [arg];
+      }
+
+      if (typeof arg === 'number') {
+        return [String(arg)];
+      }
+
+      if (Array.isArray(arg)) {
+        return clsx(...arg).split(' ');
+      }
+
+      if (typeof arg === 'object') {
+        return Object.entries(arg)
+          .filter(([, value]) => Boolean(value))
+          .map(([key]) => key);
+      }
+
+      return [];
+    })
+    .filter(Boolean)
+    .join(' ');
+}

package/lib/helpers/mask.ts

@@ -0,0 +1,52 @@
+export const MASK_CHAR = '_';
+export const MASK_REGEX = /[^A-Za-z0-9]/g;
+
+export function stripMask(value: string, mask: string, maskChar: string = MASK_CHAR): string {
+    const stripped = [];
+    let maskIndex = 0;
+
+    for (let i = 0; i < value.length && maskIndex < mask.length; i++) {
+        if (mask[maskIndex] === maskChar) {
+            stripped.push(value[i]);
+            maskIndex++;
+        } else {
+            if (value[i] === mask[maskIndex]) {
+                maskIndex++;
+            } else {
+                stripped.push(value[i]);
+
+                continue;
+            }
+        }
+    }
+
+    return stripped.join('');
+}
+
+export function applyMask(raw: string, mask: string, maskChar: string = MASK_CHAR): {
+    masked: string,
+    rawIndex: number
+} {
+    let masked = '';
+    let rawIndex = 0;
+
+    for (let i = 0; i < mask.length; i++) {
+        const mChar = mask[i];
+
+        if (mChar === maskChar) {
+            if (rawIndex < raw.length) {
+                masked += raw[rawIndex];
+                rawIndex++;
+            } else {
+                masked += maskChar;
+            }
+        } else {
+            masked += mChar;
+        }
+    }
+
+    return {
+        masked,
+        rawIndex
+    };
+}