@fangzhongya/fang-ui 0.0.14 → 0.0.16

package/dist/components/forms-drag/src/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, createElementBlock, openBlock, mergeProps, unref, createElementVNode, normalizeStyle, normalizeClass, createVNode, withModifiers, withCtx, renderSlot, createCommentVNode, withDirectives, createBlock, isRef, vShow } from "vue";
-import Draggable from "../../../_virtual/vuedraggable.umd.js";
+import Draggable from "vuedraggable";
 import { dataEmits, dataProps, dataSlot } from "../../forms/src/data.js";
 import { FormsDiv } from "../../forms-div/index.js";
 import { FormsItem } from "../../forms-item/index.js";

package/dist/components/forms-drag/src/index.vue

@@ -0,0 +1,194 @@
+<template>
+	<div ref="refEl" :class="[cs.z(), 'drag']" v-bind="attrs.root">
+		<div
+			:class="[
+				cs.z('div'),
+				cs.zis('div', 'inline', props.inline),
+				cs.zis('div', 'box', props.inlineBox),
+			]"
+			:style="styles"
+		>
+			<ElForm
+				v-bind="attrs.assem"
+				:class="[cs.z('el')]"
+				:model="dataForm"
+				:disabled="props.disabled"
+				:rules="dataRules"
+				:label-width="props.labelWidth"
+				@submit.prevent
+				ref="refForm"
+			>
+				<Draggable
+					v-bind="dragOptions"
+					@start="onStart"
+					@end="onEnd"
+					v-model="list"
+					:item-key="(key: any) => key"
+					handle=".handle"
+				>
+					<template #header>
+						<slot :name="dataSlot.header"></slot>
+					</template>
+					<template #item="{ item, index }">
+						<div
+							class="handle"
+							:class="[
+								cs.z('li'),
+								cs.is('div', item?.isDiv),
+								item.class,
+								props.itemClass,
+								cs.is('hover', props.index == index),
+							]"
+							:style="setStyles(item)"
+							@click.stop="onClickHandle(item, index)"
+							:data-key="index"
+							v-adjust="{
+								right: true,
+								onChange: (obj: any, data: any) => {
+									onChangeAdjust(item, index, obj, data);
+								},
+							}"
+							v-show="!useHide(item, dataForm)"
+						>
+							<template v-if="item?.isDiv">
+								<FormsDiv
+									:listobj="item"
+									:optionss="props.options"
+									:valueobj="dataForm"
+									v-model="dataForm"
+								></FormsDiv>
+							</template>
+							<template v-else>
+								<FormsItem
+									:listobj="item"
+									:optionss="props.options"
+									:valueobj="dataForm"
+									v-model="dataForm"
+								>
+								</FormsItem>
+							</template>
+						</div>
+					</template>
+					<template #footer>
+						<slot :name="dataSlot.footer"></slot>
+						<div
+							v-if="buts && buts.length > 0"
+							:class="[cs.z('li'), cs.z('buts')]"
+						>
+							<ElFormItem :label-width="props.butLeft">
+								<Buttons
+									:disabled="props.butDisabled"
+									:class="cs.z('buts-div')"
+									@clicks="onClickButs"
+									:modelValue="buts"
+								></Buttons>
+							</ElFormItem>
+						</div>
+					</template>
+				</Draggable>
+			</ElForm>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup>
+	import Draggable from 'vuedraggable';
+	import {
+		dataProps,
+		dataEmits,
+		dataExpose,
+		dataSlot,
+	} from '../../forms/src/data';
+	import FormsDiv from '../../forms-div/index';
+	import FormsItem from '../../forms-item/index';
+	import Buttons from '../../buttons/index';
+	import { ElForm, ElFormItem } from 'element-plus';
+	import { useCssName, useInherit } from '../../../hooks/index';
+	import { useHide } from '../../common/use';
+	import { setUp } from '../../forms/src/setup';
+	import type { ObjAny } from '../../../types/object';
+	import { ref, computed } from 'vue';
+	import vAdjust from '../../../directives/adjust';
+	const attrs = useInherit();
+	const props = defineProps({
+		...dataProps,
+		itemClass: {
+			type: String,
+		},
+		index: {
+			type: Number,
+		},
+		butDisabled: Boolean,
+	});
+	const emit = defineEmits([
+		...dataEmits,
+		'update:list',
+		'update:index',
+		'handle',
+		'adjust',
+	]);
+	const cs = useCssName('forms');
+	const refForm = ref();
+	const {
+		buts,
+		styles,
+		dataRules,
+		onClickButs,
+		setStyles,
+		submitForm,
+		validateField,
+		resetFields,
+		closeForm,
+		dataForm,
+		validate,
+	} = setUp(props, emit, cs, refForm);
+
+	const refEl = ref();
+	const drag = ref(false);
+	const dragOptions = {
+		animation: 200,
+		group: 'description',
+		disabled: false,
+		ghostClass: 'ghost',
+	};
+
+	const list = computed({
+		get() {
+			return props.list;
+		},
+		set(value) {
+			emit('update:list', value);
+		},
+	});
+
+	function onEnd(obj: ObjAny) {
+		drag.value = false;
+		emit('update:index', obj.newIndex);
+	}
+
+	function onStart(obj: ObjAny) {
+		drag.value = true;
+		emit('update:index', obj.oldIndex);
+	}
+
+	function onClickHandle(item: any, index: number) {
+		emit('update:index', index);
+		emit('handle', item, index);
+	}
+
+	function onChangeAdjust(item: any, index: number, obj: any, data: any) {
+		emit('adjust', item, index, obj, data);
+	}
+
+	defineOptions({ inheritAttrs: false });
+
+	defineExpose({
+		el: refEl,
+		dataForm,
+		closeForm,
+		submitForm,
+		resetFields,
+		validateField,
+	});
+</script>
+
+<style lang="scss"></style>

package/dist/components/forms-item/index.css

@@ -1,33 +1,33 @@
 :root {
-  --el-icon-picker-on: rgb(91, 189, 246);
-  --el-icon-picker-border: #eee;
-  --el-color-primary: #409eff;
-  --el-bag-primary: #409eff;
-  --el-bag-primary-text: #fff;
-  --el-border: #eee;
-  --el-layout-panel-gap: 10px;
-  --el-layout-panel-padding: 20px;
-  --el-layout-form-item-padding-right: var(
-  	--el-layout-panel-gap
+  --icon-picker-on: rgb(91, 189, 246);
+  --icon-picker-border: #eee;
+  --color-primary: #409eff;
+  --bag-primary: #409eff;
+  --bag-primary-text: #fff;
+  --border: #eee;
+  --layout-panel-gap: 10px;
+  --layout-panel-padding: 20px;
+  --layout-form-item-padding-right: var(
+  	--layout-panel-gap
   );
-  --el-g-main-bg: var(--el-bg-color-page);
+  --g-main-bg: var(--bg-color-page);
 }
 
-.el-com {
+.com {
   font-size: 20px;
 }
 
-.el-forms-item {
+.forms-item {
   width: 100%;
 }
-.el-forms-item-el-item.is-height {
-  min-height: var(--el-forms-item-row-height);
+.forms-item-el-item.is-height {
+  min-height: var(--forms-item-row-height);
 }
-.el-forms-item-el-item.is-height .el-form-item__label {
-  height: var(--el-forms-item-row-height);
-  line-height: var(--el-forms-item-row-height);
+.forms-item-el-item.is-height .el-form-item__label {
+  height: var(--forms-item-row-height);
+  line-height: var(--forms-item-row-height);
 }
-.el-forms-item-el-item.is-top .el-form-item__content {
-  min-height: var(--el-forms-item-row-height);
+.forms-item-el-item.is-top .el-form-item__content {
+  min-height: var(--forms-item-row-height);
   display: grid;
 }

package/dist/components/forms-item/index.d.ts

@@ -1,5 +1,6 @@
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, Plugin } from 'vue';
 declare const FormsItem: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
         optionss: {
             type: () => ObjAny;
             default(): {};
@@ -119,18 +120,18 @@ declare const FormsItem: {
             [Symbol.iterator]?: boolean | undefined;
             readonly [Symbol.unscopables]?: boolean | undefined;
         };
-    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+    }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
         optionss: ObjAny;
         listobj: ListObj;
         hideLabel: boolean;
-    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+    }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import('vue').ExtractPropTypes<{
+    }, Readonly< ExtractPropTypes<{
         optionss: {
             type: () => ObjAny;
             default(): {};
@@ -258,7 +259,7 @@ declare const FormsItem: {
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+} & ComponentOptionsBase<Readonly< ExtractPropTypes<{
     optionss: {
         type: () => ObjAny;
         default(): {};
@@ -378,11 +379,11 @@ declare const FormsItem: {
         [Symbol.iterator]?: boolean | undefined;
         readonly [Symbol.unscopables]?: boolean | undefined;
     };
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {
     optionss: ObjAny;
     listobj: ListObj;
     hideLabel: boolean;
-}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
     $slots: Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>>;
-}) & import('vue').Plugin;
+}) & Plugin;
 export { FormsItem, FormsItem as default };

package/dist/components/forms-item/index.scss

@@ -6,13 +6,13 @@ $forms-item: 'forms-item';
 	&-el-item {
 		&.is-height {
 			min-height: var(vdm('row-height', $forms-item));
-			.#{$namespace}-form-item__label {
+			.#{e()}form-item__label {
 				height: var(vdm('row-height', $forms-item));
 				line-height: var(vdm('row-height', $forms-item));
 			}
 		}
 		&.is-top {
-			.#{$namespace}-form-item__content {
+			.#{e()}form-item__content {
 				min-height: var(vdm('row-height', $forms-item));
 				display: grid;
 			}

package/dist/components/forms-item/index.ts

@@ -0,0 +1,8 @@
+import './index.scss';
+import { withInstall } from '../../utils/vues/withInstall'
+import SrcVue from './src/index.vue'
+const FormsItem = withInstall(SrcVue, 'FormsItem');
+export {
+   FormsItem,
+   FormsItem as default
+};

package/dist/components/forms-item/src/data.ts

@@ -0,0 +1,60 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const dataProps = {
+	/**
+	 * @props { Object } options 选择数据集合
+	 */
+	optionss: {
+		type: Object as () => ObjAny,
+		default() {
+			return {};
+		},
+	},
+
+	listobj: {
+		type: Object as () => ListObj,
+		default() {
+			return {};
+		},
+	},
+	valueobj: {
+		type: Object,
+	},
+	rowHeight: {
+		type: [String, Number],
+	},
+	labelWidth: {
+		type: [String, Number],
+	},
+	hideLabel: Boolean,
+	/**
+	 * 传入值
+	 * @props { String } modelValue= ( )
+	 */
+	modelValue: {
+		type: null,
+	},
+};
+
+export type DataProps = ExtractPropTypes<typeof dataProps>;
+
+/**
+ * @emits change (val:[String, Array])
+ * 选择的时间
+ */
+export const dataEmits = ['update:modelValue'];
+
+export type DataEmits = typeof dataEmits;
+
+/**
+ * @slot default 默认插槽
+ */
+export const dataSlot = {
+	default: 'default',
+};
+
+/**
+ * expose setValue (val:<string>设置的数据 )
+ * 设置值
+ */
+export const dataExpose = [];

package/dist/components/forms-item/src/index.cjs

@@ -1,26 +1,26 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("vue");
+const vue = require("vue");
 const data = require("./data.cjs");
 const index$2 = require("../../forms-div/index.cjs");
 const elementPlus = require("element-plus");
 const index$1 = require("../../../hooks/cssname/index.cjs");
 const index = require("../../../hooks/inherit/index.cjs");
 const label = require("./label.cjs");
-const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ inheritAttrs: false },
   __name: "index",
   props: data.dataProps,
   emits: data.dataEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
-    const slots = require$$0.useSlots();
-    const attrs = index.useInherit(require$$0.useAttrs());
+    const slots = vue.useSlots();
+    const attrs = index.useInherit(vue.useAttrs());
     const prs = __props;
     const props = prs.listobj;
     const emit = __emit;
     const cs = index$1.useCssName("forms-item");
-    const form = require$$0.inject("forms-form", {});
-    const value = require$$0.computed({
+    const form = vue.inject("forms-form", {});
+    const value = vue.computed({
       get() {
         return prs.modelValue;
       },
@@ -29,7 +29,7 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       }
     });
     const itemProp = props.__prop ?? props.prop;
-    const rowHeight = require$$0.computed(() => {
+    const rowHeight = vue.computed(() => {
       return props.rowHeight ?? prs.rowHeight ?? (form == null ? void 0 : form.rowHeight);
     });
     function setLabelWidth(v) {
@@ -43,75 +43,75 @@ const _sfc_main = /* @__PURE__ */ require$$0.defineComponent({
       ...data.dataExpose
     });
     return (_ctx, _cache) => {
-      return require$$0.openBlock(), require$$0.createElementBlock("div", require$$0.mergeProps({
-        class: [require$$0.unref(cs).z()],
-        style: require$$0.unref(cs).vdo({
+      return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: [vue.unref(cs).z()],
+        style: vue.unref(cs).vdo({
           rowHeight: rowHeight.value
         })
-      }, require$$0.unref(attrs).root), [
-        require$$0.unref(props).hideLabel ?? prs.hideLabel ? (require$$0.openBlock(), require$$0.createBlock(require$$0.unref(elementPlus.ElFormItem), require$$0.mergeProps({ key: 0 }, require$$0.unref(attrs).assem, {
+      }, vue.unref(attrs).root), [
+        vue.unref(props).hideLabel ?? prs.hideLabel ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElFormItem), vue.mergeProps({ key: 0 }, vue.unref(attrs).assem, {
           class: [
-            require$$0.unref(cs).z("el-item"),
-            require$$0.unref(cs).is("height", rowHeight.value && require$$0.unref(form).labelPosition != "top"),
-            require$$0.unref(cs).is("top", rowHeight.value && require$$0.unref(form).labelPosition == "top")
+            vue.unref(cs).z("el-item"),
+            vue.unref(cs).is("height", rowHeight.value && vue.unref(form).labelPosition != "top"),
+            vue.unref(cs).is("top", rowHeight.value && vue.unref(form).labelPosition == "top")
           ],
-          prop: require$$0.unref(itemProp),
-          required: require$$0.unref(props).required,
-          rules: require$$0.unref(props).rules,
-          "label-width": setLabelWidth(require$$0.unref(props))
+          prop: vue.unref(itemProp),
+          required: vue.unref(props).required,
+          rules: vue.unref(props).rules,
+          "label-width": setLabelWidth(vue.unref(props))
         }), {
-          default: require$$0.withCtx(() => [
-            require$$0.createVNode(require$$0.unref(index$2.FormsDiv), {
-              listobj: require$$0.unref(props),
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(index$2.FormsDiv), {
+              listobj: vue.unref(props),
               optionss: prs.optionss,
               valueobj: prs.valueobj,
               modelValue: value.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => value.value = $event)
-            }, require$$0.createSlots({ _: 2 }, [
-              require$$0.renderList(Object.keys(require$$0.unref(slots)), (k) => {
+            }, vue.createSlots({ _: 2 }, [
+              vue.renderList(Object.keys(vue.unref(slots)), (k) => {
                 return {
                   name: k,
-                  fn: require$$0.withCtx((scope) => [
-                    require$$0.renderSlot(_ctx.$slots, k, require$$0.normalizeProps(require$$0.guardReactiveProps(scope)))
+                  fn: vue.withCtx((scope) => [
+                    vue.renderSlot(_ctx.$slots, k, vue.normalizeProps(vue.guardReactiveProps(scope)))
                   ])
                 };
               })
             ]), 1032, ["listobj", "optionss", "valueobj", "modelValue"])
           ]),
           _: 3
-        }, 16, ["class", "prop", "required", "rules", "label-width"])) : (require$$0.openBlock(), require$$0.createBlock(require$$0.unref(elementPlus.ElFormItem), require$$0.mergeProps({ key: 1 }, require$$0.unref(attrs).assem, {
+        }, 16, ["class", "prop", "required", "rules", "label-width"])) : (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElFormItem), vue.mergeProps({ key: 1 }, vue.unref(attrs).assem, {
           class: [
-            require$$0.unref(cs).z("el-item"),
-            require$$0.unref(cs).is("height", rowHeight.value && require$$0.unref(form).labelPosition != "top"),
-            require$$0.unref(cs).is("top", rowHeight.value && require$$0.unref(form).labelPosition == "top")
+            vue.unref(cs).z("el-item"),
+            vue.unref(cs).is("height", rowHeight.value && vue.unref(form).labelPosition != "top"),
+            vue.unref(cs).is("top", rowHeight.value && vue.unref(form).labelPosition == "top")
           ],
-          prop: require$$0.unref(itemProp),
-          required: require$$0.unref(props).required,
-          rules: require$$0.unref(props).rules,
-          "label-width": setLabelWidth(require$$0.unref(props))
+          prop: vue.unref(itemProp),
+          required: vue.unref(props).required,
+          rules: vue.unref(props).rules,
+          "label-width": setLabelWidth(vue.unref(props))
         }), {
-          label: require$$0.withCtx(() => [
-            require$$0.createVNode(require$$0.unref(label.default), {
+          label: vue.withCtx(() => [
+            vue.createVNode(vue.unref(label.default), {
               value: value.value,
-              label: require$$0.unref(props).label,
-              listobj: require$$0.unref(props),
+              label: vue.unref(props).label,
+              listobj: vue.unref(props),
               optionss: prs.optionss,
               valueobj: prs.valueobj
             }, null, 8, ["value", "label", "listobj", "optionss", "valueobj"])
           ]),
-          default: require$$0.withCtx(() => [
-            require$$0.createVNode(require$$0.unref(index$2.FormsDiv), {
-              listobj: require$$0.unref(props),
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(index$2.FormsDiv), {
+              listobj: vue.unref(props),
               optionss: prs.optionss,
               valueobj: prs.valueobj,
               modelValue: value.value,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => value.value = $event)
-            }, require$$0.createSlots({ _: 2 }, [
-              require$$0.renderList(Object.keys(require$$0.unref(slots)), (k) => {
+            }, vue.createSlots({ _: 2 }, [
+              vue.renderList(Object.keys(vue.unref(slots)), (k) => {
                 return {
                   name: k,
-                  fn: require$$0.withCtx((scope) => [
-                    require$$0.renderSlot(_ctx.$slots, k, require$$0.normalizeProps(require$$0.guardReactiveProps(scope)))
+                  fn: vue.withCtx((scope) => [
+                    vue.renderSlot(_ctx.$slots, k, vue.normalizeProps(vue.guardReactiveProps(scope)))
                   ])
                 };
               })

package/dist/components/forms-item/src/index.d.ts

@@ -1,3 +1,4 @@
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>>;
@@ -5,7 +6,7 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+declare const __VLS_component: DefineComponent<ExtractPropTypes<{
     optionss: {
         type: () => ObjAny;
         default(): {};
@@ -125,7 +126,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         [Symbol.iterator]?: boolean | undefined;
         readonly [Symbol.unscopables]?: boolean | undefined;
     };
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<{
     optionss: {
         type: () => ObjAny;
         default(): {};
@@ -151,7 +152,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     optionss: ObjAny;
     listobj: ListObj;
     hideLabel: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {