update

package.json

@@ -30,11 +30,11 @@
     "@queenjs-modules/queentree": "^0.0.10",
     "@queenjs-modules/queentree-explorer": "^0.0.6",
     "@queenjs-modules/queentree-explorer-viewer": "^0.0.3",
-    "@queenjs/components": "^0.0.5",
+    "@queenjs/components": "^0.0.12",
     "@queenjs/controllers": "^0.0.6",
     "@queenjs/icons": "^0.0.20",
     "@queenjs/theme": "^0.0.8",
-    "@queenjs/ui": "^0.0.2",
+    "@queenjs/ui": "^0.0.6",
     "@queenjs/use": "^0.0.4",
     "@queenjs/utils": "^0.0.2",
     "@simonwep/pickr": "^1.8.2",

src/dict/imgs.ts

@@ -0,0 +1,3 @@
+export const Dict_Imgs = {
+  Default: require("@/assets/imgs/default.png"),
+};

src/dict/index.ts

@@ -1 +1,2 @@
 export * from "./apis";
+export * from "./imgs";

src/modules/editor/components/Canvas/index.tsx

@@ -1,6 +1,7 @@
 import { defineUI } from "queenjs";
 import components from "..";
 import { useEditor } from "../..";
+import { View } from "../CompUI/basicUI/View";
 
 export default defineUI({
   setup() {
@@ -11,15 +12,16 @@ export default defineUI({
       return (
         <div>
           {content.map((d) => {
-            const Comp = components.CompUI[d.compKey];
+            const Comp: any = components.CompUI[d.compKey];
             return (
-              <Comp
+              <View
                 key={d.id}
                 data-id={d.id}
-                {...(d.props || {})}
-                style={d.style}
-                v-model={[d.value, "value"]}
-              />
+                background={d.background}
+                layout={d.layout}
+              >
+                <Comp v-model={[d.value, "value"]} />
+              </View>
             );
           })}
         </div>

src/modules/editor/components/CompUI/attrs.ts

@@ -1,5 +0,0 @@
-export { Attrs as Image } from "./basicUI/Image/config";
-export { Attrs as Text } from "./basicUI/Text/config";
-export { Attrs as CardDemo } from "./customUI/CardDemo/config";
-export { Attrs as Cover } from "./customUI/Cover/config";
-

src/modules/editor/components/CompUI/basicUI/Image/config.ts

@@ -1,15 +0,0 @@
-import { createAttrsHoc } from "../../defines/createAttrsHoc";
-
-export const defaultValue = require("@/assets/imgs/default.png");
-
-export const dragOptions = {
-  name: "图片",
-  defaultValue,
-};
-
-export const Attrs = createAttrsHoc([
-  {
-    label: "图片",
-    dataIndex: "value",
-  },
-]);

src/modules/editor/components/CompUI/basicUI/Image/options.ts

@@ -0,0 +1,16 @@
+import { Dict_Imgs } from "@/dict";
+import { createAttrsForm } from "../../defines/createAttrsForm";
+import { createOptions } from "../../defines/createOptions";
+
+export const options = createOptions({
+  name: "图片",
+  value: Dict_Imgs.Default,
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "图片",
+    dataIndex: "value",
+    component: "Input",
+  },
+]);

src/modules/editor/components/CompUI/basicUI/Text/config.ts

@@ -1,15 +0,0 @@
-import { createAttrsHoc } from "../../defines/createAttrsHoc";
-
-export const defaultValue = "请输入内容";
-
-export const dragOptions = {
-  name: "文本",
-  defaultValue,
-};
-
-export const Attrs = createAttrsHoc([
-  {
-    label: "文本",
-    dataIndex: "value",
-  },
-]);

src/modules/editor/components/CompUI/basicUI/Text/options.ts

@@ -0,0 +1,15 @@
+import { createAttrsForm } from "../../defines/createAttrsForm";
+import { createOptions } from "../../defines/createOptions";
+
+export const options = createOptions({
+  name: "文本",
+  value: "请输入内容",
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "文本",
+    dataIndex: "value",
+    component: "Input",
+  },
+]);

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -1,11 +1,14 @@
 import { css } from "@linaria/core";
+import { omit } from "lodash";
 import { defineComponent, onMounted, reactive, ref } from "vue";
-import { string } from "vue-types";
+import { any } from "vue-types";
 import { useEditor } from "../../..";
+import { Background, Layout } from "../../../typings";
 
 export const View = defineComponent({
   props: {
-    bgSrc: string(),
+    background: any<Background>(),
+    layout: any<Layout>(),
   },
   setup(props, { slots }) {
     const { store, actions } = useEditor();
@@ -22,9 +25,13 @@ export const View = defineComponent({
       const isSelected = store.isEditMode && store.currCompId === state.compId;
 
       const styleObj: any = {};
-      if (props.bgSrc) {
-        styleObj["--view-bg-src"] = `url(${props.bgSrc})`;
+      if (props.background?.image) {
+        styleObj["backgroundImage"] = `url(${props.background.image})`;
+      } else if (props.background?.color) {
+        styleObj["backgroundColor"] = props.background.color;
       }
+      const bgOpts = Object.values(omit(props.background, ["image", "color"]));
+      const bgClasses = bgOpts.length ? `bg-${bgOpts.join(" bg-")}` : "";
 
       return (
         <div
@@ -32,7 +39,7 @@ export const View = defineComponent({
           class={[
             store.isEditMode && isComp ? viewStyle : "view_inside",
             store.isEditMode && isSelected && "view_selected",
-            props.bgSrc && viewBgStyle,
+            bgClasses,
           ]}
           style={styleObj}
           onClick={
@@ -51,10 +58,6 @@ export const View = defineComponent({
   },
 });
 
-const viewBgStyle = css`
-  background-image: var(--view-bg-src);
-`;
-
 const viewStyle = css`
   position: relative;
   &:hover {

src/modules/editor/components/CompUI/customUI/CardDemo/config.ts

@@ -1,31 +0,0 @@
-import { createAttrsHoc } from "../../defines/createAttrsHoc";
-
-export const defaultValue = {
-  cardColumns: 3,
-  themeColor: "red",
-  list: [] as { name: string; img: string; desc: string }[],
-  title: "新科技反光面料 引领潮流新风尚",
-  desc: "时尚 ｜ 精致 ｜ 百搭",
-  bgSrc:
-    "https://infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/img/partner_bg.5e324d05.png",
-};
-
-export const dragOptions = {
-  name: "卡片",
-  defaultValue,
-};
-
-export const Attrs = createAttrsHoc([
-  {
-    label: "卡片数量",
-    dataIndex: "value.cardColumns",
-  },
-  {
-    label: "主题颜色",
-    dataIndex: "value.themeColor",
-  },
-  {
-    label: "背景图片",
-    dataIndex: "value.bgSrc",
-  },
-]);

src/modules/editor/components/CompUI/customUI/CardDemo/index.tsx

@@ -1,13 +1,13 @@
+import { Dict_Imgs } from "@/dict";
 import { css } from "@linaria/core";
 import { defineComponent, reactive, watch } from "vue";
 import { any } from "vue-types";
 import { Image, Text } from "../..";
-import { View } from "../../basicUI/View";
-import { defaultValue } from "./config";
+import { options } from "./options";
 
 export const CardDemo = defineComponent({
   props: {
-    value: any<typeof defaultValue>().isRequired,
+    value: any<typeof options.value>().isRequired,
   },
   setup(props) {
     const state = reactive(props.value);
@@ -19,7 +19,7 @@ export const CardDemo = defineComponent({
         const offset = cardColumns - list.length;
         if (offset > 0) {
           Array.from({ length: offset }, () => {
-            list.push({ name: "name", img: "", desc: "xxx" });
+            list.push({ name: "name", img: Dict_Imgs.Default, desc: "xxx" });
           });
         } else {
           list.splice(cardColumns, offset * -1);
@@ -28,7 +28,7 @@ export const CardDemo = defineComponent({
     );
 
     return () => (
-      <View bgSrc={state.bgSrc}>
+      <>
         <Text v-model={[state.title, "value"]} />
         <Text v-model={[state.desc, "value"]} />
         <div class="flex space-x-16px">
@@ -50,7 +50,7 @@ export const CardDemo = defineComponent({
             </div>
           ))}
         </div>
-      </View>
+      </>
     );
   },
 });

src/modules/editor/components/CompUI/customUI/CardDemo/options.ts

@@ -0,0 +1,33 @@
+import { Dict_Imgs } from "@/dict";
+import { createAttrsForm } from "../../defines/createAttrsForm";
+import { createOptions } from "../../defines/createOptions";
+
+export const options = createOptions({
+  name: "卡片",
+  value: {
+    cardColumns: 3,
+    themeColor: "#333",
+    list: Array.from({ length: 3 }, (d, i) => ({
+      name: `demo${i + 1}`,
+      desc: "xxxxx",
+      img: Dict_Imgs.Default,
+    })),
+    title: "新科技反光面料 引领潮流新风尚",
+    desc: "时尚 ｜ 精致 ｜ 百搭",
+  },
+  background: { color: "#333" },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "卡片数量",
+    dataIndex: "value.cardColumns",
+    component: "Input",
+  },
+  {
+    label: "主题颜色",
+    dataIndex: "value.themeColor",
+    getValue: () => [1, 0, 0],
+    component: "ColorPicker",
+  },
+]);

src/modules/editor/components/CompUI/customUI/Cover/config.ts

@@ -1,20 +0,0 @@
-import { createAttrsHoc } from "../../defines/createAttrsHoc";
-
-export const defaultValue = {
-  title: "新科技反光面料 引领潮流新风尚",
-  desc: "时尚 ｜ 精致 ｜ 百搭",
-  bgSrc:
-    "https://infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/img/partner_bg.5e324d05.png",
-};
-
-export const dragOptions = {
-  name: "封面",
-  defaultValue,
-};
-
-export const Attrs = createAttrsHoc([
-  {
-    label: "背景图片",
-    dataIndex: "value.bgSrc",
-  },
-]);

src/modules/editor/components/CompUI/customUI/Cover/index.tsx

@@ -1,20 +1,19 @@
 import { defineComponent } from "vue";
 import { any } from "vue-types";
-import { View } from "../../basicUI/View";
 import { Text } from "../../basicUI/Text";
-import { defaultValue } from "./config";
+import { options } from "./options";
 
 export const Cover = defineComponent({
   props: {
-    value: any<typeof defaultValue>().isRequired,
+    value: any<typeof options.value>().isRequired,
   },
   setup(props) {
     return () => {
       return (
-        <View bgSrc={props.value.bgSrc}>
+        <>
           <Text v-model={[props.value.title, "value"]} />
           <Text v-model={[props.value.desc, "value"]} />
-        </View>
+        </>
       );
     };
   },

src/modules/editor/components/CompUI/customUI/Cover/options.ts

@@ -0,0 +1,27 @@
+import { createAttrsForm } from "../../defines/createAttrsForm";
+import { createOptions } from "../../defines/createOptions";
+
+export const options = createOptions({
+  name: "封面",
+  value: {
+    title: "新科技反光面料 引领潮流新风尚",
+    desc: "时尚 ｜ 精致 ｜ 百搭",
+  },
+  background: {
+    image:
+      "https://infishwaibao.oss-cn-chengdu.aliyuncs.com/release/sku3d/img/partner_bg.5e324d05.png",
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "标题",
+    dataIndex: "value.title",
+    component: "Input",
+  },
+  {
+    label: "描述",
+    dataIndex: "value.desc",
+    component: "Input",
+  },
+]);

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -0,0 +1,61 @@
+import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
+import { set } from "lodash";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+
+const layoutColumns: ColumnItem[] = [
+  {
+    label: "宽度",
+    dataIndex: "layout.width",
+    component: "Input",
+  },
+  {
+    label: "高度",
+    dataIndex: "layout.height",
+    component: "Input",
+  },
+  {
+    label: "外边距",
+    dataIndex: "layout.margin",
+    component: "Input",
+  },
+  {
+    label: "内边距",
+    dataIndex: "layout.padding",
+    component: "Input",
+  },
+];
+
+export function createAttrsForm(valueColumns: ColumnItem[]) {
+  return defineComponent({
+    props: {
+      component: any<DesignComp>().isRequired,
+    },
+    setup(props) {
+      function changeVal(e: { dataIndex: string; value: any }) {
+        set(props.component, e.dataIndex, e.value);
+      }
+
+      return () => {
+        const { component } = props;
+        return (
+          <div>
+            <div>组件布局</div>
+            <FormUI
+              data={component}
+              columns={layoutColumns}
+              onChange={changeVal}
+            />
+            <div>组件属性</div>
+            <FormUI
+              data={component}
+              columns={valueColumns}
+              onChange={changeVal}
+            />
+          </div>
+        );
+      };
+    },
+  });
+}

src/modules/editor/components/CompUI/defines/createAttrsHoc.tsx

@@ -1,45 +0,0 @@
-import { Input } from "ant-design-vue";
-import { get, set } from "lodash";
-import { defineComponent } from "vue";
-import { any } from "vue-types";
-
-const layoutOptions = [
-  {
-    label: "外边距",
-    dataIndex: "style.margin",
-  },
-  {
-    label: "内边距",
-    dataIndex: "style.padding",
-  },
-];
-
-export function createAttrsHoc(
-  options: { label: string; dataIndex: string }[]
-) {
-  return defineComponent({
-    props: {
-      component: any(),
-    },
-    setup(props, { emit }) {
-      return () => (
-        <div>
-          {layoutOptions.concat(options).map((d) => {
-            const val = get(props.component, d.dataIndex);
-            return (
-              <div>
-                <div>{d.label}</div>
-                <Input
-                  value={val}
-                  onChange={(e) => {
-                    set(props.component, d.dataIndex, e.target.value);
-                  }}
-                />
-              </div>
-            );
-          })}
-        </div>
-      );
-    },
-  });
-}

src/modules/editor/components/CompUI/defines/createOptions.ts

@@ -0,0 +1,12 @@
+import { Background, Layout } from "../../../typings";
+
+type IOptions<T> = {
+  name: string;
+  value: T;
+  layout?: Layout;
+  background?: Background;
+};
+
+export function createOptions<T>(opts: IOptions<T>) {
+  return opts;
+}

src/modules/editor/components/CompUI/forms.ts

@@ -0,0 +1,4 @@
+export { Form as Image } from "./basicUI/Image/options";
+export { Form as Text } from "./basicUI/Text/options";
+export { Form as CardDemo } from "./customUI/CardDemo/options";
+export { Form as Cover } from "./customUI/Cover/options";

src/modules/editor/components/CompUI/options.ts

@@ -1,4 +1,4 @@
-export { dragOptions as Image } from "./basicUI/Image/config";
-export { dragOptions as Text } from "./basicUI/Text/config";
-export { dragOptions as CardDemo } from "./customUI/CardDemo/config";
-export { dragOptions as Cover } from "./customUI/Cover/config";
+export { options as Image } from "./basicUI/Image/options";
+export { options as Text } from "./basicUI/Text/options";
+export { options as CardDemo } from "./customUI/CardDemo/options";
+export { options as Cover } from "./customUI/Cover/options";

src/modules/editor/components/Viewport/Content/index.tsx

@@ -4,6 +4,7 @@ import { Container, Draggable } from "vue-dndrop";
 import { useEditor } from "../../..";
 import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
 import Canvas from "../../Canvas";
+import { View } from "../../CompUI/basicUI/View";
 
 export default defineUI({
   setup() {
@@ -24,16 +25,18 @@ export default defineUI({
             onDrop={(e: any) => actions.moveComp(e.removedIndex, e.addedIndex)}
           >
             {store.designData.content.map((d) => {
-              const Comp = components.CompUI[d.compKey];
+              const Comp: any = components.CompUI[d.compKey];
+              console.log(d);
               return (
                 <Draggable key={d.id}>
-                  <Comp
-                    class="draggable-item"
+                  <View
                     data-id={d.id}
-                    {...(d.props || {})}
-                    style={d.style}
-                    v-model={[d.value, "value"]}
-                  />
+                    class="draggable-item"
+                    background={d.background}
+                    layout={d.layout}
+                  >
+                    <Comp v-model={[d.value, "value"]} />
+                  </View>
                 </Draggable>
               );
             })}

src/modules/editor/components/Viewport/Slider/SliderLeft.tsx

@@ -6,9 +6,7 @@ import { defineUI } from "queenjs";
 export default defineUI({
   setup() {
     const editor = useEditor();
-    function addCompUI(compKey: ICompKeys) {
-      editor.actions.addCompToDesign(compKey);
-    }
+
     return () => (
       <div>
         <div class="p-16px border-bottom !border-2px">资源中心</div>
@@ -18,17 +16,21 @@ export default defineUI({
             <Radio.Button>组件</Radio.Button>
           </Radio.Group>
           <div class="py-16px space-y-10px">
-            {Object.entries(editor.config.compUIOptions).map(([compKey, uiOpt], i) => {
-              return (
-                <div
-                  class="text-center leading-50px h-50px bg-dark-50 rounded"
-                  key={i}
-                  onClick={() => addCompUI(compKey as ICompKeys)}
-                >
-                  {uiOpt.name}
-                </div>
-              );
-            })}
+            {Object.entries(editor.config.compUIOptions).map(
+              ([compKey, uiOpt], i) => {
+                return (
+                  <div
+                    class="text-center leading-50px h-50px bg-dark-50 rounded"
+                    key={i}
+                    onClick={() =>
+                      editor.actions.addCompToDesign(compKey as ICompKeys)
+                    }
+                  >
+                    {uiOpt.name}
+                  </div>
+                );
+              }
+            )}
           </div>
         </div>
       </div>

src/modules/editor/components/Viewport/Slider/SliderRight.tsx

@@ -4,21 +4,16 @@ import { defineUI } from "queenjs";
 export default defineUI({
   setup() {
     const editor = useEditor();
-    const { AttrsUI } = editor.components;
+    const { FormUI } = editor.components;
 
     return () => {
       const { currComp } = editor.store;
-      const CurrCompAttrs = AttrsUI[currComp?.compKey as "Image"];
+      const CompForm = FormUI[currComp?.compKey as "Image"];
       return (
         <div>
           <div class="p-16px border-bottom !border-2px">设置栏</div>
           <div class="m-16px">
-            <div>当前组件</div>
-            {currComp && CurrCompAttrs && (
-              <div class="py-16px space-y-10px">
-                <CurrCompAttrs component={currComp} />
-              </div>
-            )}
+            {currComp && CompForm && <CompForm component={currComp} />}
           </div>
         </div>
       );

src/modules/editor/components/index.ts

@@ -1,9 +1,9 @@
 import Viewport from "./Viewport";
 import * as CompUI from "./CompUI";
-import * as AttrsUI from "./CompUI/attrs";
+import * as FormUI from "./CompUI/forms";
 
 export default {
   Viewport,
   CompUI,
-  AttrsUI,
+  FormUI,
 };

src/modules/editor/defines/DesignTemp/DesignComp.ts

@@ -5,10 +5,7 @@ export class DesignComp {
   id = nanoid();
   compKey: ICompKeys = "Text";
   value: any = undefined;
-  style = {
-    margin: "0.12rem",
-  };
-  props?: any;
+  layout?: any;
   background?: any;
 
   constructor(data?: Partial<DesignComp>) {

src/modules/editor/stores/index.ts

@@ -1,4 +1,4 @@
-import { cloneDeep } from "lodash";
+import { cloneDeep, omit } from "lodash";
 import { EditorModule } from "..";
 import { getOption } from "../config/compUIOptions/create";
 import { DesignTemp } from "../defines/DesignTemp";
@@ -33,8 +33,8 @@ export const store = EditorModule.store({
       index || (index = this.store.designData.content.length);
       const comp = new DesignComp({
         compKey,
-        value: cloneDeep(
-          getOption(this.config.compUIOptions, compKey)?.defaultValue
+        ...cloneDeep(
+          omit(getOption(this.config.compUIOptions, compKey), ["name"])
         ),
       });
       console.log(comp);

src/modules/editor/typings.ts

@@ -1,3 +1,34 @@
 import components from "./components";
 
 export type ICompKeys = keyof typeof components.CompUI;
+
+export type Layout = {
+  width?: string;
+  height?: string;
+  margin?: string;
+  padding?: string;
+};
+
+export type Background = {
+  color?: string;
+  image?: string;
+  position?:
+    | "bottom"
+    | "center"
+    | "left"
+    | "left-bottom"
+    | "left-top"
+    | "right"
+    | "right-bottom"
+    | "right-top"
+    | "top";
+  repeat?:
+    | "repeat"
+    | "no-repeat"
+    | "repeat-x"
+    | "repeat-y"
+    | "repeat-round"
+    | "repeat-space";
+  size?: "auto" | "cover" | "contain";
+  origin?: "border" | "padding" | "content";
+};

src/pages/editor/EditPage/index.tsx

@@ -9,17 +9,7 @@ export default defineComponent(() => {
     pageStyle: {
       backgroundColor: "#fff",
     },
-    content: Array.from(
-      { length: 1 },
-      () =>
-        new DesignComp({
-          compKey: "Card",
-          value: {
-            title1: "",
-            title2: "",
-          },
-        })
-    ),
+    content: [],
   });
 
   return () => <editor.components.Viewport class="!h-100vh" />;

src/pages/website/Material2/UI.tsx

@@ -1,10 +1,10 @@
 import { css, cx } from "@linaria/core";
 import { Button } from "ant-design-vue";
 import { defineComponent, onMounted } from "vue";
-import AssetsList from "../components/AssetsList";
 import { any } from "vue-types";
 import MaterialItem from "@/modules/resource/components/MaterialItem";
 import { SourceController } from "./SourceController";
+import AssetsList from "@/components/AssetsList";
 
 const TabNames = {
     "video":"视频",

src/pages/website/Material2/index.tsx

@@ -1,8 +1,8 @@
 import { useResource } from "@/modules/resource";
+import MaterialTemplateModal from "@/modules/resource/components/ResourceManager/MaterialTemplateModal";
 import { defineComponent } from "vue";
-import MaterialTemplateModal from "../Material/components/MaterialTemplateModal";
+import { SourceController } from "./SourceController";
 import MaterialUI from "./UI";
-import { SourceController }  from "./SourceController";
 
 export default defineComponent({
   setup() {

tsconfig.json

@@ -10,6 +10,7 @@
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "useDefineForClassFields": true,
+    "resolveJsonModule": true,
     "sourceMap": true,
     "baseUrl": ".",
     "types": ["webpack-env"],

yarn.lock

@@ -1626,10 +1626,10 @@
   resolved "http://124.70.149.18:4873/@queenjs-modules%2fqueentree/-/queentree-0.0.10.tgz#f6344ab32ba0163a3b8cf4f4b9fe6641aef2bea7"
   integrity sha512-P4cIjXKgcvd8h3vVs4f1rGLNf3/Kd5G+qGiZN+idkLjiu22HU6SNmOVLUwV6PuKg+9sTPRn7FKamSHuFxXWX5g==
 
-"@queenjs/components@^0.0.5":
-  version "0.0.5"
-  resolved "http://124.70.149.18:4873/@queenjs%2fcomponents/-/components-0.0.5.tgz#a3494c4e7a58fffa7ff659405e56bfdc8c8fb5e4"
-  integrity sha512-w9QsH0qsvJcVeYo3gCQqXyqtBsn+hSGoUeajs7a2ShFu4BW9232qlYLXV023Jqx1WlvaVgwqoMVd9GNae99bSQ==
+"@queenjs/components@^0.0.12":
+  version "0.0.12"
+  resolved "http://124.70.149.18:4873/@queenjs%2fcomponents/-/components-0.0.12.tgz#fa2b36f1749441a5bf7d9594a2f484a19cae2114"
+  integrity sha512-/s6BLSCj1SLAFj/T96EQjZYacXpXetD+trAakH+o72vbC19llsVX67kW6DCECajSdSW9+T9zEXwOcGeUV5pYSg==
   dependencies:
     "@queenjs/utils" "^0.0.1"
 
@@ -1650,10 +1650,12 @@
   dependencies:
     color-convert "^2.0.1"
 
-"@queenjs/ui@^0.0.2":
-  version "0.0.2"
-  resolved "http://124.70.149.18:4873/@queenjs%2fui/-/ui-0.0.2.tgz#650e77fad3735da7d3d398943b141a614073cd67"
-  integrity sha512-bRO1MZ4uu8B/XQEtv+zd/GNzLM9Np3U/FbWxbR/C0GF8uAsaWgx9tZjGGju2ZTPQP2Hg27M2AvvGh3EmhXJFGw==
+"@queenjs/ui@^0.0.6":
+  version "0.0.6"
+  resolved "http://124.70.149.18:4873/@queenjs%2fui/-/ui-0.0.6.tgz#d9acc23271c26a391ef9ff0484d71aeb098ee74c"
+  integrity sha512-c9b5kmmjhsj4j5nuaj492QElyt3ySiydfieyc8J7gXNwwuh8G3nQUJdSmsD7jA1B3hB0raPVOarNZVlpye3NrA==
+  dependencies:
+    swiper "^8.4.4"
 
 "@queenjs/use@^0.0.4":
   version "0.0.4"