@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/{chunk-WNF7XUX4.mjs → chunk-LFKY2QRD.mjs}

@@ -1,7 +1,32 @@
-import { defineComponent, reactive, ref, computed, provide, h } from 'vue';
-import { createFormHistory, canUndo, canRedo, classNames, getDependentFields, pushFormHistory, redoFormHistory, undoFormHistory, validateForm, getValueByPath, validateField } from '@expcat/tigercat-core';
-
 // src/components/Form.ts
+import {
+  defineComponent,
+  provide,
+  reactive,
+  computed,
+  h,
+  ref,
+  watch,
+  onBeforeUnmount
+} from "vue";
+import {
+  classNames,
+  validateForm,
+  validateField as validateFieldUtil,
+  getValueByPath,
+  createFormErrorMap,
+  getDependentFields,
+  createFormConditionDependencies,
+  resolveConditionalFormRules,
+  resolveFormFieldConditionState,
+  createFormValidationDebouncer,
+  createFormHistory,
+  pushFormHistory,
+  undoFormHistory,
+  redoFormHistory,
+  canUndo,
+  canRedo
+} from "@expcat/tigercat-core";
 var FormContextKey = /* @__PURE__ */ Symbol("FormContext");
 var Form = defineComponent({
   name: "TigerForm",
@@ -87,6 +112,14 @@ var Form = defineComponent({
       type: Object,
       default: void 0
     },
+    conditions: {
+      type: Object,
+      default: void 0
+    },
+    validateDebounce: {
+      type: Number,
+      default: 0
+    },
     undoable: {
       type: Boolean,
       default: false
@@ -109,6 +142,11 @@ var Form = defineComponent({
   setup(props, { slots, emit, expose }) {
     const errors = reactive([]);
     const fieldRules = reactive({});
+    const fieldConditions = reactive({});
+    const errorsByField = computed(() => createFormErrorMap(errors));
+    let validationDebouncer = createFormValidationDebouncer({
+      delay: props.validateDebounce
+    });
     const history = ref(
       createFormHistory(props.model ?? {}, props.maxHistorySize)
     );
@@ -122,15 +160,61 @@ var Form = defineComponent({
       }
       fieldRules[fieldName] = rules;
     };
-    const getEffectiveRules = () => {
+    const registerFieldCondition = (fieldName, condition) => {
+      if (!fieldName) {
+        return;
+      }
+      if (!condition) {
+        delete fieldConditions[fieldName];
+        return;
+      }
+      fieldConditions[fieldName] = condition;
+    };
+    const getEffectiveConditions = () => {
       const merged = {
+        ...props.conditions ?? {},
+        ...fieldConditions
+      };
+      return Object.keys(merged).length > 0 ? merged : void 0;
+    };
+    const getMergedFieldCondition = (fieldName, conditionOverride) => {
+      const base = getEffectiveConditions()?.[fieldName];
+      return base || conditionOverride ? { ...base ?? {}, ...conditionOverride ?? {} } : void 0;
+    };
+    const getFieldConditionState = (fieldName, conditionOverride) => {
+      return resolveFormFieldConditionState(
+        props.model,
+        getMergedFieldCondition(fieldName, conditionOverride)
+      );
+    };
+    const getEffectiveRules = () => {
+      const mergedRules = {
         ...props.rules ?? {},
         ...fieldRules
       };
-      return Object.keys(merged).length > 0 ? merged : void 0;
+      const rules = Object.keys(mergedRules).length > 0 ? mergedRules : void 0;
+      return resolveConditionalFormRules(props.model, rules, getEffectiveConditions());
     };
     const resolveFieldRules = (fieldName, rulesOverride) => {
-      return rulesOverride ?? fieldRules[fieldName] ?? props.rules?.[fieldName];
+      const fieldRulesValue = rulesOverride ?? fieldRules[fieldName] ?? props.rules?.[fieldName];
+      const resolved = resolveConditionalFormRules(
+        props.model,
+        fieldRulesValue ? { [fieldName]: fieldRulesValue } : void 0,
+        getEffectiveConditions()
+      );
+      return resolved?.[fieldName];
+    };
+    const getDependencyMap = () => {
+      const conditionDependencies = createFormConditionDependencies(getEffectiveConditions());
+      if (!props.fieldDependencies && conditionDependencies.size === 0) {
+        return void 0;
+      }
+      const merged = new Map(props.fieldDependencies ?? []);
+      for (const [fieldName, dependencies] of conditionDependencies.entries()) {
+        const current = merged.get(fieldName) ?? [];
+        merged.set(fieldName, Array.from(/* @__PURE__ */ new Set([...current, ...dependencies])));
+      }
+      return merged;
     };
     const runFieldValidation = async (fieldName, rulesOverride, trigger) => {
       const effectiveFieldRules = resolveFieldRules(fieldName, rulesOverride);
@@ -138,15 +222,23 @@ var Form = defineComponent({
         return null;
       }
       const value = getValueByPath(props.model, fieldName);
-      return validateField(fieldName, value, effectiveFieldRules, props.model, trigger);
+      return validateFieldUtil(fieldName, value, effectiveFieldRules, props.model, trigger);
     };
-    const validateField$1 = async (fieldName, rulesOverride, trigger) => {
+    const validateFieldNow = async (fieldName, rulesOverride, trigger) => {
+      const conditionState = getFieldConditionState(fieldName);
+      if (!conditionState.shown || conditionState.disabled) {
+        clearValidate(fieldName);
+        emit("validate", fieldName, true, void 0);
+        return;
+      }
       const effectiveFieldRules = resolveFieldRules(fieldName, rulesOverride);
       if (effectiveFieldRules) {
         const error = await runFieldValidation(fieldName, rulesOverride, trigger);
         const existingIndex = errors.findIndex((e) => e.field === fieldName);
         const existingMessage = existingIndex !== -1 ? errors[existingIndex].message : null;
-        if (!error && existingMessage === null) ; else if (error && error === existingMessage) ; else {
+        if (!error && existingMessage === null) {
+        } else if (error && error === existingMessage) {
+        } else {
           if (existingIndex !== -1) {
             errors.splice(existingIndex, 1);
           }
@@ -159,14 +251,26 @@ var Form = defineComponent({
         }
         emit("validate", fieldName, !error, error || void 0);
       }
-      if (props.fieldDependencies) {
-        const dependents = getDependentFields(fieldName, props.fieldDependencies);
+      const dependencyMap = getDependencyMap();
+      if (dependencyMap) {
+        const dependents = getDependentFields(fieldName, dependencyMap);
         for (const dep of dependents) {
-          await validateField$1(dep);
+          await validateFieldNow(dep);
         }
       }
     };
+    const validateField = async (fieldName, rulesOverride, trigger) => {
+      if (trigger === "change" && props.validateDebounce > 0) {
+        return validationDebouncer.schedule(
+          fieldName,
+          () => validateFieldNow(fieldName, rulesOverride, trigger)
+        );
+      }
+      validationDebouncer.cancel(fieldName);
+      return validateFieldNow(fieldName, rulesOverride, trigger);
+    };
     const validate = async () => {
+      validationDebouncer.cancel();
       errors.splice(0, errors.length);
       const effectiveRules = getEffectiveRules();
       if (!effectiveRules) {
@@ -180,6 +284,7 @@ var Form = defineComponent({
       if (!fieldNames || fieldNames.length === 0) {
         return true;
       }
+      fieldNames.forEach((fieldName) => validationDebouncer.cancel(fieldName));
       const nextErrors = [];
       const fieldSet = new Set(fieldNames);
       for (const fieldName of fieldNames) {
@@ -204,10 +309,12 @@ var Form = defineComponent({
     };
     const clearValidate = (fieldNames) => {
       if (!fieldNames) {
+        validationDebouncer.cancel();
         errors.splice(0, errors.length);
         return;
       }
       const fields = Array.isArray(fieldNames) ? fieldNames : [fieldNames];
+      fields.forEach((fieldName) => validationDebouncer.cancel(fieldName));
       fields.forEach((fieldName) => {
         const index = errors.findIndex((e) => e.field === fieldName);
         if (index !== -1) {
@@ -216,6 +323,7 @@ var Form = defineComponent({
       });
     };
     const resetFields = () => {
+      validationDebouncer.cancel();
       clearValidate();
     };
     const addField = (fieldName, defaultValue) => {
@@ -229,6 +337,16 @@ var Form = defineComponent({
         clearValidate(fieldName);
       }
     };
+    watch(
+      () => props.validateDebounce,
+      (delay) => {
+        validationDebouncer.cancel();
+        validationDebouncer = createFormValidationDebouncer({ delay });
+      }
+    );
+    onBeforeUnmount(() => {
+      validationDebouncer.cancel();
+    });
     const snapshotHistory = () => {
       if (!props.undoable || !props.model) return;
       history.value = pushFormHistory(history.value, props.model);
@@ -271,15 +389,18 @@ var Form = defineComponent({
       disabled: props.disabled,
       loading: props.loading,
       errors,
+      errorsByField: errorsByField.value,
       registerFieldRules,
-      validateField: validateField$1,
+      registerFieldCondition,
+      getFieldConditionState,
+      validateField,
       clearValidate
     }));
     provide(FormContextKey, formContextValue);
     expose({
       validate,
       validateFields,
-      validateField: validateField$1,
+      validateField,
       clearValidate,
       resetFields,
       addField,
@@ -312,4 +433,8 @@ var Form = defineComponent({
 });
 var Form_default = Form;
 
-export { Form, FormContextKey, Form_default };
+export {
+  FormContextKey,
+  Form,
+  Form_default
+};

package/dist/chunk-LG6KGO5D.js

@@ -0,0 +1,161 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Resizable.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var Resizable = _vue.defineComponent.call(void 0, {
+  name: "TigerResizable",
+  props: {
+    defaultWidth: { type: Number, default: void 0 },
+    defaultHeight: { type: Number, default: void 0 },
+    minWidth: { type: Number, default: 0 },
+    minHeight: { type: Number, default: 0 },
+    maxWidth: { type: Number, default: void 0 },
+    maxHeight: { type: Number, default: void 0 },
+    handles: {
+      type: Array,
+      default: () => [..._tigercatcore.defaultResizeHandles]
+    },
+    axis: {
+      type: String,
+      default: "both"
+    },
+    disabled: { type: Boolean, default: false },
+    lockAspectRatio: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["resize-start", "resize", "resize-end"],
+  setup(props, { slots, emit, attrs }) {
+    const width = _vue.ref.call(void 0, props.defaultWidth);
+    const height = _vue.ref.call(void 0, props.defaultHeight);
+    const draggingHandle = _vue.ref.call(void 0, null);
+    const startMouseX = _vue.ref.call(void 0, 0);
+    const startMouseY = _vue.ref.call(void 0, 0);
+    const startWidth = _vue.ref.call(void 0, 0);
+    const startHeight = _vue.ref.call(void 0, 0);
+    let dragSession = null;
+    const containerClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.resizableBaseClasses,
+        "group/resizable",
+        props.className,
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      )
+    );
+    const containerStyle = _vue.computed.call(void 0, () => {
+      const s = {};
+      if (width.value != null) s.width = `${width.value}px`;
+      if (height.value != null) s.height = `${height.value}px`;
+      return s;
+    });
+    const cleanupDragSession = () => {
+      _optionalChain([dragSession, 'optionalAccess', _ => _.dispose, 'call', _2 => _2()]);
+      dragSession = null;
+    };
+    const onMouseDown = (handle, e) => {
+      if (props.disabled) return;
+      e.preventDefault();
+      cleanupDragSession();
+      draggingHandle.value = handle;
+      startMouseX.value = e.clientX;
+      startMouseY.value = e.clientY;
+      startWidth.value = _nullishCoalesce(width.value, () => ( 0));
+      startHeight.value = _nullishCoalesce(height.value, () => ( 0));
+      emit("resize-start", {
+        width: startWidth.value,
+        height: startHeight.value,
+        handle,
+        deltaX: 0,
+        deltaY: 0
+      });
+      dragSession = _tigercatcore.createDocumentDragSession.call(void 0, {
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: _optionalChain([e, 'access', _3 => _3.currentTarget, 'optionalAccess', _4 => _4.ownerDocument]),
+        onMove: ({ currentX, currentY }) => {
+          applyResize(currentX, currentY, (event) => emit("resize", event));
+        },
+        onEnd: ({ currentX, currentY }) => {
+          applyResize(currentX, currentY, (event) => emit("resize-end", event));
+          draggingHandle.value = null;
+          dragSession = null;
+        }
+      });
+    };
+    const applyResize = (currentX, currentY, notify) => {
+      const handle = draggingHandle.value;
+      if (!handle) return;
+      const mouseDeltaX = currentX - startMouseX.value;
+      const mouseDeltaY = currentY - startMouseY.value;
+      const { deltaWidth, deltaHeight } = _tigercatcore.calculateResizeDelta.call(void 0, 
+        handle,
+        mouseDeltaX,
+        mouseDeltaY,
+        props.axis
+      );
+      let newW = startWidth.value + deltaWidth;
+      let newH = startHeight.value + deltaHeight;
+      if (props.lockAspectRatio) {
+        const ar = _tigercatcore.applyAspectRatio.call(void 0, newW, newH, startWidth.value, startHeight.value);
+        newW = ar.width;
+        newH = ar.height;
+      }
+      const clamped = _tigercatcore.clampDimensions.call(void 0, 
+        newW,
+        newH,
+        props.minWidth,
+        props.minHeight,
+        props.maxWidth,
+        props.maxHeight
+      );
+      width.value = clamped.width;
+      height.value = clamped.height;
+      notify({
+        width: clamped.width,
+        height: clamped.height,
+        handle,
+        deltaX: clamped.width - startWidth.value,
+        deltaY: clamped.height - startHeight.value
+      });
+    };
+    _vue.onBeforeUnmount.call(void 0, () => {
+      cleanupDragSession();
+    });
+    return () => {
+      const handleNodes = props.handles.map(
+        (pos) => _vue.h.call(void 0, "div", {
+          class: _tigercatcore.getResizableHandleClasses.call(void 0, pos, draggingHandle.value === pos, props.disabled),
+          "data-handle": pos,
+          onMousedown: (e) => onMouseDown(pos, e)
+        })
+      );
+      return _vue.h.call(void 0, 
+        "div",
+        {
+          class: containerClasses.value,
+          style: { ...containerStyle.value, ...props.style },
+          "data-resizable": ""
+        },
+        [..._optionalChain([slots, 'access', _5 => _5.default, 'optionalCall', _6 => _6()]) || [], ...handleNodes]
+      );
+    };
+  }
+});
+var Resizable_default = Resizable;
+
+
+
+
+exports.Resizable = Resizable; exports.Resizable_default = Resizable_default;

package/dist/{chunk-LV3BMS4U.mjs → chunk-LILAZ4UJ.mjs}

@@ -1,7 +1,38 @@
-import { useTigerConfig } from './chunk-XP5M2GK7.mjs';
-import { defineComponent, ref, computed, watch, h } from 'vue';
-import { getSpinnerSVG, mergeTigerLocale, getUploadLabels, mergeStyleValues, classNames, coerceClassValue, getDragAreaClasses, interpolateUploadLabel, formatFileSize, getUploadButtonClasses, getPictureCardClasses, getUploadStatusIconClasses, normalizeSvgAttrs, getFileListItemClasses, icon20ViewBox, successCircleSolidIcon20PathD, errorCircleSolidIcon20PathD, closeSolidIcon20PathD, prepareUploadFiles, fileToUploadFile } from '@expcat/tigercat-core';
+import {
+  useTigerConfig
+} from "./chunk-VG6E4NX6.mjs";
 
+// src/components/Upload.ts
+import { defineComponent, ref, computed, watch, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  icon20ViewBox,
+  closeSolidIcon20PathD,
+  successCircleSolidIcon20PathD,
+  errorCircleSolidIcon20PathD,
+  getSpinnerSVG,
+  normalizeSvgAttrs,
+  getUploadLabels,
+  interpolateUploadLabel,
+  mergeTigerLocale,
+  prepareUploadFiles,
+  fileToUploadFile,
+  createUploadChunks,
+  createUploadQueueItem,
+  getUploadResumeKey,
+  runUploadQueue,
+  handleUploadDragOver,
+  handleUploadDragLeave,
+  handleUploadDrop,
+  formatFileSize,
+  getUploadButtonClasses,
+  getDragAreaClasses,
+  getFileListItemClasses,
+  getPictureCardClasses,
+  getUploadStatusIconClasses
+} from "@expcat/tigercat-core";
 var Upload = defineComponent({
   name: "TigerUpload",
   inheritAttrs: false,
@@ -93,6 +124,10 @@ var Upload = defineComponent({
       type: Boolean,
       default: true
     },
+    queue: { type: Boolean, default: false },
+    maxConcurrent: { type: Number, default: 2 },
+    chunkSize: { type: Number, default: void 0 },
+    resumable: { type: Boolean, default: false },
     /**
      * Custom upload request function
      */
@@ -150,6 +185,8 @@ var Upload = defineComponent({
      * Emitted on upload error
      */
     error: (error, _file) => error instanceof Error,
+    "chunk-progress": (_chunk, progress, _file) => typeof progress === "number",
+    "queue-change": (queue) => Array.isArray(queue),
     /**
      * Emitted when file limit is exceeded
      */
@@ -216,30 +253,100 @@ var Upload = defineComponent({
         nextFileList = [...nextFileList, uploadFile];
         setFileList(nextFileList);
         emit("change", uploadFile, nextFileList);
-        if (props.autoUpload) {
-          uploadFile.status = "uploading";
-          if (props.customRequest) {
-            props.customRequest({
-              file,
-              onProgress: (progress) => {
-                uploadFile.progress = progress;
-                emit("progress", progress, uploadFile);
-              },
-              onSuccess: (response) => {
-                uploadFile.status = "success";
-                emit("success", response, uploadFile);
-              },
-              onError: (error) => {
-                uploadFile.status = "error";
-                uploadFile.error = error.message;
-                emit("error", error, uploadFile);
-              }
-            });
-          } else {
-            uploadFile.status = "success";
-          }
+        if (props.autoUpload && !props.queue) {
+          await uploadOne(file, uploadFile, () => setFileList([...nextFileList]));
         }
       }
+      if (props.autoUpload && props.queue) {
+        const queueItems = prepared.acceptedFiles.map(
+          (file) => createUploadQueueItem(
+            file,
+            nextFileList.find((item) => item.file === file)?.uid,
+            props.chunkSize
+          )
+        );
+        emit("queue-change", queueItems);
+        await runUploadQueue(
+          queueItems,
+          async (item) => {
+            const uploadFile = nextFileList.find((candidate) => candidate.uid === item.id);
+            if (!uploadFile) return;
+            await uploadOne(item.file, uploadFile, () => setFileList([...nextFileList]));
+          },
+          { concurrency: props.maxConcurrent, onChange: (items) => emit("queue-change", items) }
+        );
+      }
+    };
+    const uploadOne = async (file, uploadFile, notify) => {
+      uploadFile.status = "uploading";
+      notify();
+      if (!props.customRequest) {
+        uploadFile.progress = 100;
+        uploadFile.status = "success";
+        notify();
+        return;
+      }
+      const chunks = props.chunkSize ? createUploadChunks(file, props.chunkSize) : [];
+      const resumeKey = props.resumable ? getUploadResumeKey(file) : void 0;
+      if (chunks.length <= 1) {
+        await requestUpload(file, uploadFile, notify, { resumeKey });
+        return;
+      }
+      for (const chunk of chunks) {
+        const chunkFile = new File([chunk.blob], file.name, {
+          type: file.type,
+          lastModified: file.lastModified
+        });
+        await requestUpload(chunkFile, uploadFile, notify, {
+          originalFile: file,
+          chunk,
+          totalChunks: chunks.length,
+          resumeKey
+        });
+      }
+      uploadFile.progress = 100;
+      uploadFile.status = "success";
+      emit("success", { chunks: chunks.length, resumeKey }, uploadFile);
+      notify();
+    };
+    const requestUpload = (file, uploadFile, notify, options) => {
+      return new Promise((resolve, reject) => {
+        props.customRequest?.({
+          file,
+          originalFile: options.originalFile,
+          chunk: options.chunk,
+          chunkIndex: options.chunk?.index,
+          totalChunks: options.totalChunks,
+          resumeKey: options.resumeKey,
+          onProgress: (progress) => {
+            const nextProgress = options.chunk ? Math.round(
+              (options.chunk.index + progress / 100) / (options.totalChunks ?? 1) * 100
+            ) : progress;
+            uploadFile.progress = nextProgress;
+            if (options.chunk) {
+              emit("chunk-progress", options.chunk, progress, uploadFile);
+            }
+            emit("progress", nextProgress, uploadFile);
+            notify();
+          },
+          onSuccess: (response) => {
+            if (!options.chunk) {
+              uploadFile.status = "success";
+              uploadFile.progress = 100;
+              emit("success", response, uploadFile);
+              notify();
+            }
+            resolve();
+          },
+          onError: (error) => {
+            uploadFile.status = "error";
+            uploadFile.error = error.message;
+            emit("error", error, uploadFile);
+            notify();
+            reject(error);
+          }
+        });
+      });
     };
     const handleRemove = (file) => {
       const newFileList = fileListValue.value.filter((f) => f.uid !== file.uid);
@@ -251,21 +358,20 @@ var Upload = defineComponent({
       emit("preview", file);
     };
     const handleDragOver = (event) => {
-      if (props.disabled) return;
-      event.preventDefault();
-      isDragging.value = true;
+      const result = handleUploadDragOver(event, props.disabled);
+      if (!result.handled) return;
+      isDragging.value = result.isDragging;
     };
     const handleDragLeave = (event) => {
-      if (props.disabled) return;
-      event.preventDefault();
-      isDragging.value = false;
+      const result = handleUploadDragLeave(event, props.disabled);
+      if (!result.handled) return;
+      isDragging.value = result.isDragging;
     };
     const handleDrop = async (event) => {
-      if (props.disabled) return;
-      event.preventDefault();
-      isDragging.value = false;
-      const files = Array.from(event.dataTransfer?.files || []);
-      await processFiles(files);
+      const result = handleUploadDrop(event, props.disabled);
+      if (!result.handled) return;
+      isDragging.value = result.isDragging;
+      await processFiles(result.files);
     };
     const handleDragKeydown = (event) => {
       if (props.disabled) return;
@@ -624,4 +730,7 @@ var Upload = defineComponent({
 });
 var Upload_default = Upload;
 
-export { Upload, Upload_default };
+export {
+  Upload,
+  Upload_default
+};