123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287 |
- import { useEditor } from "@/modules/editor";
- import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
- import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
- import { defineComponent } from "vue";
- import { any } from "vue-types";
- import { Size } from "../formItems/Size";
- import Slider from "../formItems/Slider";
- import { createColorOpts } from "./formOpts/createColorOpts";
- import { Divider } from "ant-design-vue";
- import Align from "./align";
- import { css } from "@linaria/core";
- export const layoutColumns: ColumnItem[] = [
- {
- // label: "尺寸",
- dataIndex: "layout.size",
- component: Size,
- props: {
- labels: ["宽度", "高度"],
- },
- },
- {
- label: "对齐",
- component: Align,
- dataIndex: "id",
- },
- // {
- // label: "对齐",
- // dataIndex: "layout.alignSelf",
- // component: Select,
- // props: {
- // class: "w-full",
- // options: [
- // { label: "左对齐", value: "start" },
- // { label: "居中", value: "center" },
- // { label: "右对齐", value: "end" },
- // ],
- // },
- // },
- // {
- // label: "外边距",
- // dataIndex: "layout.margin",
- // component: "Input",
- // },
- // {
- // label: "内边距",
- // dataIndex: "layout.padding",
- // component: "Input",
- // },
- // {
- // label: "偏移矩阵",
- // dataIndex: "layout.transformMatrix",
- // component: Input,
- // },
- // {
- // label: "上下偏移",
- // dataIndex: "layout.offsetY",
- // component: "Slider",
- // props: {
- // min: -375,
- // max: 375,
- // },
- // getValue: (v) => v || 0,
- // },
- // {
- // label: "层级",
- // dataIndex: "layout.zIndex",
- // component: InputNumber,
- // props: {
- // min: 0,
- // max: 99,
- // },
- // },
- // {
- // label: "遮罩",
- // dataIndex: "layout.mask",
- // component: Select,
- // props: {
- // class: "w-full",
- // options: [{ label: "无", value: "" }].concat(
- // Object.entries(compMasks).map(([key, value]) => {
- // return {
- // label: value.name,
- // value: key,
- // };
- // })
- // ),
- // },
- // },
- // {
- // label: "锁定",
- // dataIndex: "layout.locked",
- // component: "Switch",
- // },
- ];
- export const bdColumns: ColumnItem[] = [
- {
- label: "边框样式",
- dataIndex: "layout.border.style",
- component: "Select",
- props: {
- defaultValue: "none",
- options: [
- { label: "无", value: "none" },
- { label: "直线", value: "solid" },
- { label: "点状线", value: "dotted" },
- { label: "破折线", value: "dashed" },
- ],
- },
- },
- {
- label: "边框颜色",
- dataIndex: "layout.border.color",
- ...createColorOpts(),
- },
- {
- label: "边框尺寸",
- dataIndex: "layout.border.width",
- component: Slider,
- props: {
- defaultValue: 0,
- step: 1,
- min: 0,
- max: 2,
- },
- },
- {
- label: "边框弧度",
- dataIndex: "layout.border.radius",
- component: Slider,
- // isVisible: (value, data) =>
- // ["Web3D", "Container", "Video"].includes(data.compKey) ? false : true,
- props: {
- defaultValue: 0,
- min: 0,
- max: 100,
- step: 1,
- },
- },
- ];
- export const bgColumns: ColumnItem[] = [
- {
- label: "背景颜色",
- dataIndex: "layout.background.color",
- ...createColorOpts(),
- },
- {
- label: "透明度",
- dataIndex: "layout.opacity",
- component: Slider,
- isVisible: (value, data) =>
- ["Web3D", "Video"].includes(data.compKey) ? false : true,
- props: {
- defaultValue: 1,
- min: 0,
- max: 1,
- step: 0.01,
- },
- },
- // {
- // label: "背景图片",
- // dataIndex: "background.image",
- // component: ImagePicker,
- // },
- // {
- // label: "repeat",
- // dataIndex: "background.repeat",
- // component: "Select",
- // props: {
- // options: [
- // "repeat",
- // "no-repeat",
- // "repeat-x",
- // "repeat-y",
- // "repeat-round",
- // "repeat-space",
- // ].map((v) => ({ label: v, value: v })),
- // },
- // },
- // {
- // label: "position",
- // dataIndex: "background.position",
- // component: "Select",
- // props: {
- // options: [
- // "center",
- // "top",
- // "bottom",
- // "left",
- // "left-top",
- // "left-bottom",
- // "right",
- // "right-top",
- // "right-bottom",
- // ].map((v) => ({ label: v, value: v })),
- // },
- // },
- // {
- // label: "size",
- // dataIndex: "background.size",
- // component: "Select",
- // props: {
- // options: ["auto", "cover", "contain"].map((v) => ({
- // label: v,
- // value: v,
- // })),
- // },
- // },
- // {
- // label: "clipPath",
- // dataIndex: "background.clipPath",
- // component: "Input",
- // },
- ];
- export function createAttrsForm(valueColumns: ColumnItem[], columnsUI?: any) {
- return defineComponent({
- props: {
- component: any<DesignComp>().isRequired,
- },
- setup(props) {
- const { store, actions } = useEditor();
- function changeVal(e: { dataIndex: string; value: any }) {
- actions.updateCompData(store.currComp, e.dataIndex, e.value);
- actions.submitUpdate();
- }
- return () => {
- const { component } = props;
- return (
- <div class={formStyle}>
- {valueColumns.length ? (
- <>
- <div> <span class="text-white">属性</span></div>
- <FormUI
- data={component}
- columns={valueColumns}
- onChange={changeVal}
- />
- <Divider></Divider>
- </>
- ) : null}
- {columnsUI && <columnsUI component={component} />}
- <div><span class="text-white">布局</span></div>
- <FormUI
- data={component}
- columns={layoutColumns}
- style={{color: "red"}}
- onChange={changeVal}
- />
- {["Web3D", "Video", "Map"].includes(component.compKey) ? null : (
- <>
- <Divider></Divider>
- <div> <span class="text-white">背景</span> </div>
- <FormUI
- data={component}
- columns={bgColumns}
- onChange={changeVal}
- />
- </>
- )}
- {["Text", "Image", "Map"].includes(component.compKey) ? (
- <>
- <Divider></Divider>
- <div><span class="text-white">边框</span></div>
- <FormUI
- data={component}
- columns={bdColumns}
- onChange={changeVal}
- />
- </>
- ) : null}
- </div>
- );
- };
- },
- });
- }
- const formStyle = css`
- .item_label {
- color: #A9ABAF !important;
- }
- `
|