@vunk/form 0.0.1-alpha.2 → 0.0.1-alpha.22

package/composables/index.js

@@ -1,4 +1,4 @@
-import { isRef, ref, computed, unref } from 'vue';
+import { isRef, ref, computed as computed$1, unref, inject } from 'vue';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -27,7 +27,7 @@ const useSourceManager = (source, opts = {}) => {
     slotsChildren: ["default"]
   });
   opts.slotsChildren && op.slotsChildren.push(...opts.slotsChildren);
-  const manager = computed(() => {
+  const manager = computed$1(() => {
     const keyRecord = {};
     const propRecord = {};
     function intoData(list, k = []) {
@@ -79,4 +79,305 @@ const useSourceManager = (source, opts = {}) => {
   ];
 };
 
-export { useSourceManager };
+/**
+ * Make a map and return a function for checking if a key
+ * is in that map.
+ * IMPORTANT: all calls of this function must be prefixed with
+ * \/\*#\_\_PURE\_\_\*\/
+ * So that rollup can tree-shake them if necessary.
+ */
+
+(process.env.NODE_ENV !== 'production')
+    ? Object.freeze({})
+    : {};
+(process.env.NODE_ENV !== 'production') ? Object.freeze([]) : [];
+const NOOP = () => { };
+const extend = Object.assign;
+const isArray = Array.isArray;
+const isFunction = (val) => typeof val === 'function';
+const isSymbol = (val) => typeof val === 'symbol';
+
+let activeEffectScope;
+function recordEffectScope(effect, scope = activeEffectScope) {
+    if (scope && scope.active) {
+        scope.effects.push(effect);
+    }
+}
+
+const createDep = (effects) => {
+    const dep = new Set(effects);
+    dep.w = 0;
+    dep.n = 0;
+    return dep;
+};
+const wasTracked = (dep) => (dep.w & trackOpBit) > 0;
+const newTracked = (dep) => (dep.n & trackOpBit) > 0;
+const initDepMarkers = ({ deps }) => {
+    if (deps.length) {
+        for (let i = 0; i < deps.length; i++) {
+            deps[i].w |= trackOpBit; // set was tracked
+        }
+    }
+};
+const finalizeDepMarkers = (effect) => {
+    const { deps } = effect;
+    if (deps.length) {
+        let ptr = 0;
+        for (let i = 0; i < deps.length; i++) {
+            const dep = deps[i];
+            if (wasTracked(dep) && !newTracked(dep)) {
+                dep.delete(effect);
+            }
+            else {
+                deps[ptr++] = dep;
+            }
+            // clear bits
+            dep.w &= ~trackOpBit;
+            dep.n &= ~trackOpBit;
+        }
+        deps.length = ptr;
+    }
+};
+// The number of effects currently being tracked recursively.
+let effectTrackDepth = 0;
+let trackOpBit = 1;
+/**
+ * The bitwise track markers support at most 30 levels of recursion.
+ * This value is chosen to enable modern JS engines to use a SMI on all platforms.
+ * When recursion depth is greater, fall back to using a full cleanup.
+ */
+const maxMarkerBits = 30;
+let activeEffect;
+Symbol((process.env.NODE_ENV !== 'production') ? 'iterate' : '');
+Symbol((process.env.NODE_ENV !== 'production') ? 'Map key iterate' : '');
+class ReactiveEffect {
+    constructor(fn, scheduler = null, scope) {
+        this.fn = fn;
+        this.scheduler = scheduler;
+        this.active = true;
+        this.deps = [];
+        this.parent = undefined;
+        recordEffectScope(this, scope);
+    }
+    run() {
+        if (!this.active) {
+            return this.fn();
+        }
+        let parent = activeEffect;
+        let lastShouldTrack = shouldTrack;
+        while (parent) {
+            if (parent === this) {
+                return;
+            }
+            parent = parent.parent;
+        }
+        try {
+            this.parent = activeEffect;
+            activeEffect = this;
+            shouldTrack = true;
+            trackOpBit = 1 << ++effectTrackDepth;
+            if (effectTrackDepth <= maxMarkerBits) {
+                initDepMarkers(this);
+            }
+            else {
+                cleanupEffect(this);
+            }
+            return this.fn();
+        }
+        finally {
+            if (effectTrackDepth <= maxMarkerBits) {
+                finalizeDepMarkers(this);
+            }
+            trackOpBit = 1 << --effectTrackDepth;
+            activeEffect = this.parent;
+            shouldTrack = lastShouldTrack;
+            this.parent = undefined;
+            if (this.deferStop) {
+                this.stop();
+            }
+        }
+    }
+    stop() {
+        // stopped while running itself - defer the cleanup
+        if (activeEffect === this) {
+            this.deferStop = true;
+        }
+        else if (this.active) {
+            cleanupEffect(this);
+            if (this.onStop) {
+                this.onStop();
+            }
+            this.active = false;
+        }
+    }
+}
+function cleanupEffect(effect) {
+    const { deps } = effect;
+    if (deps.length) {
+        for (let i = 0; i < deps.length; i++) {
+            deps[i].delete(effect);
+        }
+        deps.length = 0;
+    }
+}
+let shouldTrack = true;
+function trackEffects(dep, debuggerEventExtraInfo) {
+    let shouldTrack = false;
+    if (effectTrackDepth <= maxMarkerBits) {
+        if (!newTracked(dep)) {
+            dep.n |= trackOpBit; // set newly tracked
+            shouldTrack = !wasTracked(dep);
+        }
+    }
+    else {
+        // Full cleanup mode.
+        shouldTrack = !dep.has(activeEffect);
+    }
+    if (shouldTrack) {
+        dep.add(activeEffect);
+        activeEffect.deps.push(dep);
+        if ((process.env.NODE_ENV !== 'production') && activeEffect.onTrack) {
+            activeEffect.onTrack(Object.assign({ effect: activeEffect }, debuggerEventExtraInfo));
+        }
+    }
+}
+function triggerEffects(dep, debuggerEventExtraInfo) {
+    // spread into array for stabilization
+    const effects = isArray(dep) ? dep : [...dep];
+    for (const effect of effects) {
+        if (effect.computed) {
+            triggerEffect(effect, debuggerEventExtraInfo);
+        }
+    }
+    for (const effect of effects) {
+        if (!effect.computed) {
+            triggerEffect(effect, debuggerEventExtraInfo);
+        }
+    }
+}
+function triggerEffect(effect, debuggerEventExtraInfo) {
+    if (effect !== activeEffect || effect.allowRecurse) {
+        if ((process.env.NODE_ENV !== 'production') && effect.onTrigger) {
+            effect.onTrigger(extend({ effect }, debuggerEventExtraInfo));
+        }
+        if (effect.scheduler) {
+            effect.scheduler();
+        }
+        else {
+            effect.run();
+        }
+    }
+}
+new Set(
+/*#__PURE__*/
+Object.getOwnPropertyNames(Symbol)
+    // ios10.x Object.getOwnPropertyNames(Symbol) can enumerate 'arguments' and 'caller'
+    // but accessing them on Symbol leads to TypeError because Symbol is a strict mode
+    // function
+    .filter(key => key !== 'arguments' && key !== 'caller')
+    .map(key => Symbol[key])
+    .filter(isSymbol));
+function toRaw(observed) {
+    const raw = observed && observed["__v_raw" /* RAW */];
+    return raw ? toRaw(raw) : observed;
+}
+
+function trackRefValue(ref) {
+    if (shouldTrack && activeEffect) {
+        ref = toRaw(ref);
+        if ((process.env.NODE_ENV !== 'production')) {
+            trackEffects(ref.dep || (ref.dep = createDep()), {
+                target: ref,
+                type: "get" /* GET */,
+                key: 'value'
+            });
+        }
+        else {
+            trackEffects(ref.dep || (ref.dep = createDep()));
+        }
+    }
+}
+function triggerRefValue(ref, newVal) {
+    ref = toRaw(ref);
+    if (ref.dep) {
+        if ((process.env.NODE_ENV !== 'production')) {
+            triggerEffects(ref.dep, {
+                target: ref,
+                type: "set" /* SET */,
+                key: 'value',
+                newValue: newVal
+            });
+        }
+        else {
+            triggerEffects(ref.dep);
+        }
+    }
+}
+
+class ComputedRefImpl {
+    constructor(getter, _setter, isReadonly, isSSR) {
+        this._setter = _setter;
+        this.dep = undefined;
+        this.__v_isRef = true;
+        this._dirty = true;
+        this.effect = new ReactiveEffect(getter, () => {
+            if (!this._dirty) {
+                this._dirty = true;
+                triggerRefValue(this);
+            }
+        });
+        this.effect.computed = this;
+        this.effect.active = this._cacheable = !isSSR;
+        this["__v_isReadonly" /* IS_READONLY */] = isReadonly;
+    }
+    get value() {
+        // the computed ref may get wrapped by other proxies e.g. readonly() #3376
+        const self = toRaw(this);
+        trackRefValue(self);
+        if (self._dirty || !self._cacheable) {
+            self._dirty = false;
+            self._value = self.effect.run();
+        }
+        return self._value;
+    }
+    set value(newValue) {
+        this._setter(newValue);
+    }
+}
+function computed(getterOrOptions, debugOptions, isSSR = false) {
+    let getter;
+    let setter;
+    const onlyGetter = isFunction(getterOrOptions);
+    if (onlyGetter) {
+        getter = getterOrOptions;
+        setter = (process.env.NODE_ENV !== 'production')
+            ? () => {
+                console.warn('Write operation failed: computed value is readonly');
+            }
+            : NOOP;
+    }
+    else {
+        getter = getterOrOptions.get;
+        setter = getterOrOptions.set;
+    }
+    const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);
+    if ((process.env.NODE_ENV !== 'production') && debugOptions && !isSSR) {
+        cRef.effect.onTrack = debugOptions.onTrack;
+        cRef.effect.onTrigger = debugOptions.onTrigger;
+    }
+    return cRef;
+}
+
+const useForm = () => {
+  return inject("vkfFormVm", null);
+};
+const useComputedReadonly = (props) => {
+  const form = useForm();
+  const readonly = computed(() => {
+    var _a, _b;
+    return (_b = (_a = props.readonly) != null ? _a : form == null ? void 0 : form.props.readonly) != null ? _b : false;
+  });
+  return readonly;
+};
+
+export { useComputedReadonly, useForm, useSourceManager };

package/composables/useForm.d.ts

@@ -0,0 +1,9 @@
+import { ComponentInternalInstance, ComputedRef } from 'vue';
+import { VkfForm } from '@vunk/form/components/form';
+import { VueComponentPropsType } from '@vunk/core';
+export declare const useForm: () => (ComponentInternalInstance & {
+    props: VueComponentPropsType<typeof VkfForm>;
+}) | null;
+export declare const useComputedReadonly: (props: {
+    readonly?: boolean;
+}) => ComputedRef<boolean>;

package/index.css

@@ -1,7 +1,141 @@
 
+.el-checkbox-group.is-readonly .el-checkbox,
+.el-checkbox-group.is-readonly{
+  --el-readonly-cursor: auto;
+  --el-disabled-text-color: var(--el-checkbox-text-color);
+  --el-checkbox-disabled-checked-input-fill: var(--el-checkbox-bg-color);
+  --el-checkbox-disabled-checked-icon-color: var(--el-checkbox-checked-icon-color);
+}
+
+
+.el-checkbox-group.is-readonly .el-checkbox__input.is-checked+.el-checkbox__label {
+  color: var(--el-checkbox-checked-text-color);
+}
+.el-checkbox-group.is-readonly .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: var(--el-checkbox-checked-bg-color);
+    border-color: var(--el-checkbox-checked-input-border-color);
+}
+.el-checkbox-group.is-readonly .el-checkbox__input.is-disabled+span.el-checkbox__label,
+.el-checkbox-group.is-readonly .el-checkbox__input.is-disabled .el-checkbox__inner {
+  cursor: var(--el-readonly-cursor);
+}
+
+
+
+.el-checkbox-group.is-readonly .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner{
+  border-left-color: var(--el-checkbox-button-checked-border-color);
+}
+
+.el-checkbox-group.is-readonly .el-checkbox-button.is-checked .el-checkbox-button__inner {
+    color: var(--el-checkbox-button-checked-text-color);
+    background-color: var(--el-checkbox-button-checked-bg-color);
+    border-color: var(--el-checkbox-button-checked-border-color);
+    box-shadow: -1px 0 0 0 var(--el-color-primary-light-7);
+}
+
+.el-checkbox-group.is-readonly .el-checkbox-button.is-disabled .el-checkbox-button__inner{
+  cursor: var(--el-readonly-cursor);
+}
+
+
+.vkf-form-item--inline{
+  display: inline-flex;
+}
+
+
 .vkf-flex {
   display: flex;
 }
 .vkf-flex > .el-form-item {
   width: 100%;
 }
+
+
+.el-input-number.is-readonly{
+  --el-readonly-cursor: text;
+  --el-disabled-bg-color: initial;
+  --el-disabled-text-color: var(--el-input-text-color);
+}
+.el-input-number.is-readonly .el-input-number__decrease, 
+.el-input-number.is-readonly .el-input-number__increase{
+  display: none;
+}
+.el-input-number.is-readonly .el-input.is-disabled,
+.el-input-number.is-readonly .el-input.is-disabled .el-input__inner{
+  cursor: var(--el-readonly-cursor);
+}
+
+
+.el-radio-group.is-readonly,
+.el-radio-group.is-readonly .el-radio-button{
+  --el-readonly-cursor: auto;
+  --el-disabled-bg-color: initial;
+  --el-disabled-text-color: initial;
+  --el-radio-button-disabled-checked-fill: var(--el-radio-button-checked-bg-color);
+}
+
+.el-radio-group.is-readonly .is-active .el-radio-button__original-radio:disabled+.el-radio-button__inner{
+  color: var(--el-radio-button-checked-text-color);
+}
+.el-radio-group.is-readonly .el-radio-button__original-radio:disabled+.el-radio-button__inner {
+  cursor: var(--el-readonly-cursor);
+}
+
+.el-radio-group.is-readonly  .el-radio__input.is-checked+.el-radio__label{
+ color: var(--el-color-primary);
+}
+.el-radio-group.is-readonly .el-radio__input.is-checked .el-radio__inner {
+  border-color: var(--el-color-primary);
+  background: var(--el-color-primary);
+
+}
+.el-radio-group.is-readonly .el-radio__input .el-radio__inner,
+.el-radio-group.is-readonly .el-radio__input.is-disabled+span.el-radio__label {
+ cursor: var(--el-readonly-cursor);
+}
+ 
+
+
+.el-select.is-readonly{
+  --el-readonly-cursor: text;
+  --el-disabled-bg-color: initial;
+  --el-disabled-text-color: var(--el-input-text-color);
+}
+.el-select.is-readonly .el-input.is-disabled .el-input__inner,
+.el-select.is-readonly .el-input.is-disabled .el-select__caret,
+.el-select.is-readonly .el-input.is-disabled .el-input__wrapper{
+  cursor: var(--el-readonly-cursor);
+}
+
+
+.el-switch.is-readonly{
+ --el-readonly-cursor: auto;
+}
+.el-switch.is-readonly.is-readonly{
+  opacity: .9;
+}
+.el-switch.is-readonly.is-readonly .el-switch__core, 
+.el-switch.is-readonly.is-readonly .el-switch__label{
+  cursor: var(--el-readonly-cursor);
+}
+
+
+
+.vkf-upload.is-readonly .el-upload,
+.vkf-upload.is-readonly .el-upload{
+  display: none;
+}
+.vkf-upload .el-upload-list{
+  min-width: 100px;
+}
+
+
+.el-upload-list__item-status-label{
+  z-index: 1;
+}
+.el-upload-list__item .el-icon--close{
+  z-index: 1;
+}
+.el-upload-list__item-name .el-icon.el-icon--download-primary{
+  color: var(--el-color-primary);
+}

package/index.d.ts

@@ -6,4 +6,5 @@ export * from '@vunk/form/composables';
 export * from '@vunk/form/components/form-item-renderer';
 export * from '@vunk/form/components/form-item-renderer-template';
 export * from '@vunk/form/components/form-item-renderer-template-layout';
+export * from '@vunk/form/components/form-item-renderer-template-default';
 export * from '@vunk/form/components/form';

package/index.esm.js

@@ -6,6 +6,8 @@ import { VkfFormItemRendererTemplate } from '@vunk/form/components/form-item-ren
 export * from '@vunk/form/components/form-item-renderer-template';
 import { VkfFormItemRendererTemplateLayout } from '@vunk/form/components/form-item-renderer-template-layout';
 export * from '@vunk/form/components/form-item-renderer-template-layout';
+import { VkfFormItemRendererTemplateDefault } from '@vunk/form/components/form-item-renderer-template-default';
+export * from '@vunk/form/components/form-item-renderer-template-default';
 export * from '@vunk/form/shared';
 export * from '@vunk/form/composables';
 
@@ -13,7 +15,8 @@ var Components = [
   VkfForm,
   VkfFormItemRenderer,
   VkfFormItemRendererTemplate,
-  VkfFormItemRendererTemplateLayout
+  VkfFormItemRendererTemplateLayout,
+  VkfFormItemRendererTemplateDefault
 ];
 
 const makeInstaller = (components = []) => {

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@vunk/form",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.22",
   "description": "",
   "main": "index.esm.js",
   "scripts": {
     "build": "gulp -f gulpfile.ts"
   },
+  "dependencies": {
+    "@vunk/core": "npm:@vunk/core@alpha"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",

package/shared/default-renderer-source/index.d.ts

@@ -0,0 +1,12 @@
+import { VkfCheckboxSource, VkfColorPickerSource, VkfDatePickerSource, VkfInputNumberSource, VkfInputSource, VkfRadioSource, VkfSelectSource, VkfSwitchSource, VkfUploadSource } from '@vunk/form/shared/types';
+export declare const defaultRendererSource: {
+    VkfInput: VkfInputSource;
+    VkfInputNumber: VkfInputNumberSource;
+    VkfSwitch: VkfSwitchSource;
+    VkfRadio: VkfRadioSource;
+    VkfSelect: VkfSelectSource;
+    VkfCheckbox: VkfCheckboxSource;
+    VkfColorPicker: VkfColorPickerSource;
+    VkfDatePicker: VkfDatePickerSource;
+    VkfUpload: VkfUploadSource;
+};

package/shared/default-renderer-source/index.js

@@ -0,0 +1,83 @@
+const defaultRendererSource = {
+  VkfInput: {
+    templateType: "VkfInput",
+    prop: "",
+    label: ""
+  },
+  VkfInputNumber: {
+    templateType: "VkfInputNumber",
+    prop: "",
+    label: ""
+  },
+  VkfSwitch: {
+    templateType: "VkfSwitch",
+    prop: "",
+    label: ""
+  },
+  VkfRadio: {
+    templateType: "VkfRadio",
+    prop: "",
+    label: "\u6027\u522B",
+    options: [
+      {
+        value: 0,
+        label: "\u5973"
+      },
+      {
+        value: 1,
+        label: "\u7537"
+      }
+    ]
+  },
+  VkfSelect: {
+    templateType: "VkfSelect",
+    prop: "",
+    label: "",
+    multiple: false,
+    options: [
+      {
+        value: 0,
+        label: "\u5973"
+      },
+      {
+        value: 1,
+        label: "\u7537"
+      }
+    ]
+  },
+  VkfCheckbox: {
+    templateType: "VkfCheckbox",
+    prop: "",
+    options: [
+      {
+        value: 0,
+        label: "\u5973"
+      },
+      {
+        value: 1,
+        label: "\u7537"
+      }
+    ]
+  },
+  VkfColorPicker: {
+    templateType: "VkfColorPicker",
+    prop: "color",
+    label: "\u989C\u8272",
+    showAlpha: true
+  },
+  VkfDatePicker: {
+    templateType: "VkfDatePicker",
+    prop: "",
+    label: "",
+    type: "date",
+    valueFormat: "YYYY-MM-DD",
+    format: "YYYY\u5E74MM\u6708DD\u65E5"
+  },
+  VkfUpload: {
+    templateType: "VkfUpload",
+    prop: "",
+    label: ""
+  }
+};
+
+export { defaultRendererSource };