@fangzhongya/fang-ui 0.1.54 → 0.1.56

package/dist/components/history/src/index2.cjs

@@ -2,12 +2,14 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const index$2 = require("../../icon/index.cjs");
-const left = require("../../../icons/vue/left.cjs");
-const right = require("../../../icons/vue/right.cjs");
+require("../../../icons/vue/left.cjs");
+require("../../../icons/vue/right.cjs");
 const data = require("./data.cjs");
 const index = require("../../../hooks/cssname/index.cjs");
 const deepCopy = require("@fangzhongya/utils/basic/object/deepCopy");
 const index$1 = require("../../../hooks/props-default/index.cjs");
+const left_vue_vue_type_script_setup_true_lang = require("../../../icons/vue/left2.cjs");
+const right_vue_vue_type_script_setup_true_lang = require("../../../icons/vue/right2.cjs");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: index$1.getProps(data.dataProps),
@@ -108,7 +110,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).iconRetreat, {}, () => [
-              vue.createVNode(left.default)
+              vue.createVNode(left_vue_vue_type_script_setup_true_lang.default)
             ])
           ]),
           _: 3
@@ -123,7 +125,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }, {
           default: vue.withCtx(() => [
             vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).iconForward, {}, () => [
-              vue.createVNode(right.default)
+              vue.createVNode(right_vue_vue_type_script_setup_true_lang.default)
             ])
           ]),
           _: 3

package/dist/components/history/src/index2.js

@@ -1,11 +1,13 @@
 import { defineComponent, ref, computed, watch, createElementBlock, openBlock, normalizeClass, unref, createVNode, withCtx, renderSlot } from "vue";
 import { Icon } from "../../icon/index.js";
-import Left from "../../../icons/vue/left.js";
-import Right from "../../../icons/vue/right.js";
+import "../../../icons/vue/left.js";
+import "../../../icons/vue/right.js";
 import { name, dataProps, dataExpose, dataSlot, dataEmits } from "./data.js";
 import { useCssName } from "../../../hooks/cssname/index.js";
 import { deepCopy } from "@fangzhongya/utils/basic/object/deepCopy";
 import { usePropsDefault, getProps } from "../../../hooks/props-default/index.js";
+import _sfc_main$1 from "../../../icons/vue/left2.js";
+import _sfc_main$2 from "../../../icons/vue/right2.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: getProps(dataProps),
@@ -106,7 +108,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, unref(dataSlot).iconRetreat, {}, () => [
-              createVNode(Left)
+              createVNode(_sfc_main$1)
             ])
           ]),
           _: 3
@@ -121,7 +123,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, unref(dataSlot).iconForward, {}, () => [
-              createVNode(Right)
+              createVNode(_sfc_main$2)
             ])
           ]),
           _: 3

package/dist/components/input-array/src/index2.cjs

@@ -2,12 +2,13 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const index$4 = require("../../icon/index.cjs");
-const clear = require("../../../icons/vue/clear.cjs");
+require("../../../icons/vue/clear.cjs");
 const data = require("./data.cjs");
 const index = require("../../../hooks/cssname/index.cjs");
 const index$2 = require("../../input-number/index.cjs");
 const index$3 = require("../../input/index.cjs");
 const index$1 = require("../../../hooks/props-default/index.cjs");
+const clear_vue_vue_type_script_setup_true_lang = require("../../../icons/vue/clear2.cjs");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   props: index$1.getProps(data.dataProps),
@@ -203,7 +204,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           onClick: vue.withModifiers(onClear, ["stop"])
         }, {
           default: vue.withCtx(() => [
-            vue.createVNode(clear.default)
+            vue.createVNode(clear_vue_vue_type_script_setup_true_lang.default)
           ]),
           _: 1
         }, 8, ["class"])) : vue.createCommentVNode("", true),

package/dist/components/input-array/src/index2.js

@@ -1,11 +1,12 @@
 import { defineComponent, ref, computed, watch, createElementBlock, openBlock, withModifiers, normalizeClass, unref, renderSlot, createBlock, createElementVNode, createCommentVNode, toDisplayString, withCtx, createVNode } from "vue";
 import { Icon } from "../../icon/index.js";
-import Clear from "../../../icons/vue/clear.js";
+import "../../../icons/vue/clear.js";
 import { name, dataProps, dataExpose, dataSlot, dataEmits } from "./data.js";
 import { useCssName } from "../../../hooks/cssname/index.js";
 import { InputNumber } from "../../input-number/index.js";
 import { Input } from "../../input/index.js";
 import { usePropsDefault, getProps } from "../../../hooks/props-default/index.js";
+import _sfc_main$1 from "../../../icons/vue/clear2.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: getProps(dataProps),
@@ -201,7 +202,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onClick: withModifiers(onClear, ["stop"])
         }, {
           default: withCtx(() => [
-            createVNode(Clear)
+            createVNode(_sfc_main$1)
           ]),
           _: 1
         }, 8, ["class"])) : createCommentVNode("", true),

package/dist/components/input-history/src/index2.cjs

@@ -2,7 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const index$6 = require("../../icon/index.cjs");
-const clear = require("../../../icons/vue/clear.cjs");
+require("../../../icons/vue/clear.cjs");
 const index$4 = require("../../../hooks/expose/index.cjs");
 const index$5 = require("../../popover/index.cjs");
 const index$8 = require("../../button/index.cjs");
@@ -17,6 +17,7 @@ require("../../form/index.cjs");
 const index$3 = require("element-plus/es/components/form/index");
 const replaceAfter = require("@fangzhongya/utils/basic/array/replaceAfter");
 const deleteArray = require("@fangzhongya/utils/basic/array/deleteArray");
+const clear_vue_vue_type_script_setup_true_lang = require("../../../icons/vue/clear2.cjs");
 const _hoisted_1 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ inheritAttrs: false },
@@ -166,7 +167,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       onClick: vue.withModifiers(($event) => onClean(item), ["stop"])
                     }, {
                       default: vue.withCtx(() => [
-                        vue.createVNode(clear.default)
+                        vue.createVNode(clear_vue_vue_type_script_setup_true_lang.default)
                       ]),
                       _: 1
                     }, 8, ["class", "onClick"])) : vue.createCommentVNode("", true)

package/dist/components/input-history/src/index2.js

@@ -1,6 +1,6 @@
 import { defineComponent, useAttrs, useSlots, ref, watch, onMounted, createElementBlock, openBlock, mergeProps, unref, createVNode, createBlock, createCommentVNode, withCtx, normalizeClass, createElementVNode, Fragment, renderList, withModifiers, toDisplayString, withKeys, createSlots, renderSlot, normalizeProps, guardReactiveProps, createTextVNode } from "vue";
 import { Icon } from "../../icon/index.js";
-import Clear from "../../../icons/vue/clear.js";
+import "../../../icons/vue/clear.js";
 import { useExpose } from "../../../hooks/expose/index.js";
 import { Popover } from "../../popover/index.js";
 import { Button } from "../../button/index.js";
@@ -15,6 +15,7 @@ import "../../form/index.js";
 import { useDisabled } from "element-plus/es/components/form/index";
 import { replaceAfter } from "@fangzhongya/utils/basic/array/replaceAfter";
 import { deleteArray } from "@fangzhongya/utils/basic/array/deleteArray";
+import _sfc_main$1 from "../../../icons/vue/clear2.js";
 const _hoisted_1 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
@@ -164,7 +165,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       onClick: withModifiers(($event) => onClean(item), ["stop"])
                     }, {
                       default: withCtx(() => [
-                        createVNode(Clear)
+                        createVNode(_sfc_main$1)
                       ]),
                       _: 1
                     }, 8, ["class", "onClick"])) : createCommentVNode("", true)

package/dist/components/input-select/src/index2.cjs

@@ -2,8 +2,8 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const index$6 = require("../../icon/index.cjs");
-const clear = require("../../../icons/vue/clear.cjs");
-const below = require("../../../icons/vue/below.cjs");
+require("../../../icons/vue/clear.cjs");
+require("../../../icons/vue/below.cjs");
 const data = require("./data.cjs");
 const index$5 = require("../../inputs/index.cjs");
 const index$4 = require("../../popover/index.cjs");
@@ -14,6 +14,8 @@ const getCss = require("@fangzhongya/utils/css/getCss");
 require("../../form/index.cjs");
 const index$2 = require("../../../hooks/props-default/index.cjs");
 const index$3 = require("element-plus/es/components/form/index");
+const clear_vue_vue_type_script_setup_true_lang = require("../../../icons/vue/clear2.cjs");
+const below_vue_vue_type_script_setup_true_lang = require("../../../icons/vue/below2.cjs");
 const _hoisted_1 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{ inheritAttrs: false },
@@ -153,7 +155,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   onClick: vue.withModifiers(onClear, ["stop"])
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(clear.default)
+                    vue.createVNode(clear_vue_vue_type_script_setup_true_lang.default)
                   ]),
                   _: 1
                 }, 8, ["class"])) : vue.createCommentVNode("", true),
@@ -166,7 +168,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 }, {
                   default: vue.withCtx(() => [
                     vue.renderSlot(_ctx.$slots, vue.unref(data.dataSlot).iconSelect, {}, () => [
-                      vue.createVNode(below.default)
+                      vue.createVNode(below_vue_vue_type_script_setup_true_lang.default)
                     ])
                   ]),
                   _: 3

package/dist/components/input-select/src/index2.js

@@ -1,7 +1,7 @@
 import { defineComponent, useAttrs, useSlots, ref, computed, onMounted, createBlock, openBlock, unref, withCtx, createElementVNode, normalizeClass, createElementBlock, Fragment, renderList, withModifiers, toDisplayString, mergeProps, createVNode, createSlots, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import { Icon } from "../../icon/index.js";
-import Clear from "../../../icons/vue/clear.js";
-import Below from "../../../icons/vue/below.js";
+import "../../../icons/vue/clear.js";
+import "../../../icons/vue/below.js";
 import { name, dataProps, dataExpose, dataSlot, dataEmits } from "./data.js";
 import { Inputs } from "../../inputs/index.js";
 import { Popover } from "../../popover/index.js";
@@ -12,6 +12,8 @@ import { getCss } from "@fangzhongya/utils/css/getCss";
 import "../../form/index.js";
 import { usePropsDefault, getProps } from "../../../hooks/props-default/index.js";
 import { useDisabled } from "element-plus/es/components/form/index";
+import _sfc_main$1 from "../../../icons/vue/clear2.js";
+import _sfc_main$2 from "../../../icons/vue/below2.js";
 const _hoisted_1 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
@@ -151,7 +153,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   onClick: withModifiers(onClear, ["stop"])
                 }, {
                   default: withCtx(() => [
-                    createVNode(Clear)
+                    createVNode(_sfc_main$1)
                   ]),
                   _: 1
                 }, 8, ["class"])) : createCommentVNode("", true),
@@ -164,7 +166,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, unref(dataSlot).iconSelect, {}, () => [
-                      createVNode(Below)
+                      createVNode(_sfc_main$2)
                     ])
                   ]),
                   _: 3

package/dist/components/labels/src/data.d.ts

@@ -1,5 +1,5 @@
 import { ExtractPropTypes } from 'vue';
-import { comHandle } from '../../common/list';
+import { comHandle, Options } from '../../common/list';
 /**
  * @title {h3} labels
  */
@@ -29,10 +29,10 @@ export declare const dataProps: {
     };
     options: {
         type: {
-            (arrayLength: number): (string | number | boolean | ObjAny)[];
-            (...items: (string | number | boolean | ObjAny)[]): (string | number | boolean | ObjAny)[];
-            new (arrayLength: number): (string | number | boolean | ObjAny)[];
-            new (...items: (string | number | boolean | ObjAny)[]): (string | number | boolean | ObjAny)[];
+            (arrayLength: number): Options[];
+            (...items: Options[]): Options[];
+            new (arrayLength: number): Options[];
+            new (...items: Options[]): Options[];
             isArray(arg: any): arg is any[];
             readonly prototype: any[];
             from<T>(arrayLike: ArrayLike<T>): T[];

package/dist/components/list/index.scss

@@ -1,6 +1,6 @@
 @use '../scss/common.scss' as *;
 
-@use 'common/com.scss' as *;
+@use '../tableset/common/com.scss' as *;
 
 $list: 'list';
 @include b($list) {

package/dist/components/list/src/index2.cjs

@@ -7,17 +7,17 @@ const getAttrValue = require("../../../utils/vues/getAttrValue.cjs");
 const use = require("../../common/use.cjs");
 const index$1 = require("../../../hooks/compons/index.cjs");
 const index$2 = require("../../../hooks/cssname/index.cjs");
-const tooltip = require("../../tables/common/tooltip.cjs");
+const tooltip = require("../../tableset/common/tooltip.cjs");
 const index = require("../../../hooks/props-default/index.cjs");
 const data = require("./data.cjs");
-require("../../tables/common/com-fig.cjs");
-require("../../tables/common/com-but.cjs");
-require("../../tables/common/com-color.cjs");
-require("../../tables/common/com-lis.cjs");
-const comFig_vue_vue_type_script_setup_true_lang = require("../../tables/common/com-fig2.cjs");
-const comLis_vue_vue_type_script_setup_true_lang = require("../../tables/common/com-lis2.cjs");
-const comColor_vue_vue_type_script_setup_true_lang = require("../../tables/common/com-color2.cjs");
-const comBut_vue_vue_type_script_setup_true_lang = require("../../tables/common/com-but2.cjs");
+require("../../tableset/common/com-fig.cjs");
+require("../../tableset/common/com-but.cjs");
+require("../../tableset/common/com-color.cjs");
+require("../../tableset/common/com-lis.cjs");
+const comFig_vue_vue_type_script_setup_true_lang = require("../../tableset/common/com-fig2.cjs");
+const comLis_vue_vue_type_script_setup_true_lang = require("../../tableset/common/com-lis2.cjs");
+const comColor_vue_vue_type_script_setup_true_lang = require("../../tableset/common/com-color2.cjs");
+const comBut_vue_vue_type_script_setup_true_lang = require("../../tableset/common/com-but2.cjs");
 const Components = {
   But: comBut_vue_vue_type_script_setup_true_lang.default,
   Color: comColor_vue_vue_type_script_setup_true_lang.default,

package/dist/components/list/src/index2.js

@@ -5,17 +5,17 @@ import { getAttrValue } from "../../../utils/vues/getAttrValue.js";
 import { useObjComponSelected, useHide } from "../../common/use.js";
 import { useCompons } from "../../../hooks/compons/index.js";
 import { useCssName } from "../../../hooks/cssname/index.js";
-import { hideTooltip, showTooltip } from "../../tables/common/tooltip.js";
+import { hideTooltip, showTooltip } from "../../tableset/common/tooltip.js";
 import { usePropsDefault, getProps } from "../../../hooks/props-default/index.js";
 import { name, dataProps, dataExpose, dataEmits } from "./data.js";
-import "../../tables/common/com-fig.js";
-import "../../tables/common/com-but.js";
-import "../../tables/common/com-color.js";
-import "../../tables/common/com-lis.js";
-import _sfc_main$1 from "../../tables/common/com-fig2.js";
-import _sfc_main$2 from "../../tables/common/com-lis2.js";
-import _sfc_main$3 from "../../tables/common/com-color2.js";
-import _sfc_main$4 from "../../tables/common/com-but2.js";
+import "../../tableset/common/com-fig.js";
+import "../../tableset/common/com-but.js";
+import "../../tableset/common/com-color.js";
+import "../../tableset/common/com-lis.js";
+import _sfc_main$1 from "../../tableset/common/com-fig2.js";
+import _sfc_main$2 from "../../tableset/common/com-lis2.js";
+import _sfc_main$3 from "../../tableset/common/com-color2.js";
+import _sfc_main$4 from "../../tableset/common/com-but2.js";
 const Components = {
   But: _sfc_main$4,
   Color: _sfc_main$3,

package/dist/components/list/src/util.cjs

@@ -4,7 +4,7 @@ require("vue");
 const use = require("../../common/use.cjs");
 const index = require("../../../hooks/compons/index.cjs");
 const data = require("./data.cjs");
-const util = require("../../tables/common/util.cjs");
+const util = require("../../tableset/common/util.cjs");
 const setClass = (item, data2, index2) => {
   const v = data2[item.state ?? item.prop];
   if (item.setcss) {

package/dist/components/list/src/util.js

@@ -2,7 +2,7 @@ import "vue";
 import { useSetSlot, useSetCompon, useGetDomValue, useGetDomLabel, useLabelAdditional } from "../../common/use.js";
 import { useComponsGet } from "../../../hooks/compons/index.js";
 import { name } from "./data.js";
-import { setEmptyDisplay } from "../../tables/common/util.js";
+import { setEmptyDisplay } from "../../tableset/common/util.js";
 const setClass = (item, data, index) => {
   const v = data[item.state ?? item.prop];
   if (item.setcss) {

package/dist/components/listsp/src/index2.cjs

@@ -5,7 +5,7 @@ const index$3 = require("../../lists/index.cjs");
 const index$5 = require("../../paging/index.cjs");
 const index$4 = require("../../../directives/scroll/index.cjs");
 const data = require("./data.cjs");
-const pagin = require("../../tables/common/pagin.cjs");
+const pagin = require("../../tableset/common/pagin.cjs");
 const index$1 = require("../../../hooks/cssname/index.cjs");
 const index = require("../../../hooks/locale/index.cjs");
 const index$2 = require("../../../hooks/props-default/index.cjs");

package/dist/components/listsp/src/index2.js

@@ -3,7 +3,7 @@ import { Lists } from "../../lists/index.js";
 import { Paging } from "../../paging/index.js";
 import vScroll from "../../../directives/scroll/index.js";
 import { name } from "./data.js";
-import { dataProps, useInit, dataEmit } from "../../tables/common/pagin.js";
+import { dataProps, useInit, dataEmit } from "../../tableset/common/pagin.js";
 import { useCssName } from "../../../hooks/cssname/index.js";
 import { useLocale } from "../../../hooks/locale/index.js";
 import { usePropsDefault, getProps } from "../../../hooks/props-default/index.js";

package/dist/components/listspd/src/index2.cjs

@@ -7,7 +7,7 @@ const index$6 = require("../../paging/index.cjs");
 const index$4 = require("../../../directives/scroll/index.cjs");
 const index$5 = require("../../../directives/sortable/index.cjs");
 const data = require("./data.cjs");
-const pagin = require("../../tables/common/pagin.cjs");
+const pagin = require("../../tableset/common/pagin.cjs");
 const index$1 = require("../../../hooks/cssname/index.cjs");
 const index = require("../../../hooks/locale/index.cjs");
 const index$2 = require("../../../hooks/props-default/index.cjs");

package/dist/components/listspd/src/index2.js

@@ -5,7 +5,7 @@ import { Paging } from "../../paging/index.js";
 import vScroll from "../../../directives/scroll/index.js";
 import vSortable from "../../../directives/sortable/index.js";
 import { name } from "./data.js";
-import { dataProps, useInit, dataEmit } from "../../tables/common/pagin.js";
+import { dataProps, useInit, dataEmit } from "../../tableset/common/pagin.js";
 import { useCssName } from "../../../hooks/cssname/index.js";
 import { useLocale } from "../../../hooks/locale/index.js";
 import { usePropsDefault, getProps } from "../../../hooks/props-default/index.js";

package/dist/components/message/index.d.ts

@@ -1,8 +1,15 @@
-import { SFCInstallWithContext } from 'element-plus/es/utils';
-import { Message } from 'element-plus/es/components';
-import { Plugin } from 'vue';
+import { MessageFn, MessageTypedFn } from 'packages';
+import { ObjectPlugin, AppContext, Plugin } from 'vue';
 export * from './src/export';
-declare const Message: SFCInstallWithContext<Message> & {
+declare const Message: MessageFn & {
+    primary: MessageTypedFn;
+    success: MessageTypedFn;
+    warning: MessageTypedFn;
+    info: MessageTypedFn;
+    error: MessageTypedFn;
+} & ObjectPlugin & {
+    _context: AppContext | null;
+} & {
     install: Plugin["install"];
 };
 export { Message };

package/dist/components/message/src/function.d.ts

@@ -1,6 +1,13 @@
-import { SFCInstallWithContext } from 'element-plus/es/utils';
-import { Message } from 'element-plus/es/components';
-import { Plugin } from 'vue';
-export declare function withInstall<T>(fun: T, name: string): SFCInstallWithContext<Message> & {
+import { MessageFn, MessageTypedFn } from 'packages';
+import { ObjectPlugin, AppContext, Plugin } from 'vue';
+export declare function withInstall<T>(fun: T, name: string): MessageFn & {
+    primary: MessageTypedFn;
+    success: MessageTypedFn;
+    warning: MessageTypedFn;
+    info: MessageTypedFn;
+    error: MessageTypedFn;
+} & ObjectPlugin & {
+    _context: AppContext | null;
+} & {
     install: Plugin["install"];
 };

package/dist/components/message-box/index.d.ts

@@ -1,8 +1,7 @@
-import { SFCWithInstall } from 'element-plus/es/utils';
 import { IElMessageBox } from 'packages';
-import { AppContext } from 'vue';
+import { ObjectPlugin, AppContext } from 'vue';
 export * from './src/export';
-declare const MessageBox: SFCWithInstall<IElMessageBox> & {
+declare const MessageBox: IElMessageBox & ObjectPlugin & {
     install: Function;
     _context: AppContext | null;
 };

package/dist/components/message-box/src/function.d.ts

@@ -1,7 +1,6 @@
-import { AppContext } from 'vue';
-import { SFCWithInstall } from 'element-plus/es/utils';
+import { AppContext, ObjectPlugin } from 'vue';
 import { IElMessageBox } from 'packages';
-export declare function withInstall<T>(fun: T, name: string): SFCWithInstall<IElMessageBox> & {
+export declare function withInstall<T>(fun: T, name: string): IElMessageBox & ObjectPlugin & {
     install: Function;
     _context: AppContext | null;
 };

package/dist/components/retract/index.css

@@ -24,6 +24,9 @@
 
 .retract {
   position: relative;
+  --retract-width: 12px;
+  --retract-height: 40px;
+  --retract-width-adjust: 8px;
 }
 .retract-div.left, .retract-div.right {
   height: 100%;
@@ -53,13 +56,13 @@
 }
 .retract .retract-but.is-left {
   top: 50%;
-  width: 20px;
-  height: 50px;
-  margin-top: -25px;
-  left: -20px;
+  height: var(--retract-height);
+  margin-top: calc(var(--retract-height) / 2 * -1);
+  width: var(--retract-width);
+  left: calc(0 - var(--retract-width));
 }
 .retract .retract-but.is-left.is-adjust {
-  left: -10px;
+  left: calc(var(--retract-width-adjust) - var(--retract-width));
 }
 .retract .retract-but.is-left .retract-icon {
   transform: rotate(0);
@@ -69,13 +72,13 @@
 }
 .retract .retract-but.is-right {
   top: 50%;
-  width: 20px;
-  height: 50px;
-  margin-top: -25px;
-  right: -20px;
+  height: var(--retract-height);
+  margin-top: calc(var(--retract-height) / 2 * -1);
+  width: var(--retract-width);
+  right: calc(0 - var(--retract-width));
 }
 .retract .retract-but.is-right.is-adjust {
-  right: -10px;
+  right: calc(var(--retract-width-adjust) - var(--retract-width));
 }
 .retract .retract-but.is-right .retract-icon {
   transform: rotate(-180deg);
@@ -85,13 +88,13 @@
 }
 .retract .retract-but.is-top {
   left: 50%;
-  width: 50px;
-  height: 20px;
-  margin-left: -25px;
-  top: -20px;
+  width: var(--retract-height);
+  margin-left: calc(var(--retract-height) / 2 * -1);
+  height: var(--retract-width);
+  top: calc(0 - var(--retract-width));
 }
 .retract .retract-but.is-top.is-adjust {
-  top: -10px;
+  top: calc(var(--retract-width-adjust) - var(--retract-width));
 }
 .retract .retract-but.is-top .retract-icon {
   transform: rotate(90deg);
@@ -101,13 +104,13 @@
 }
 .retract .retract-but.is-bottom {
   left: 50%;
-  width: 50px;
-  height: 20px;
-  margin-left: -25px;
-  bottom: -20px;
+  width: var(--retract-height);
+  margin-left: calc(var(--retract-height) / 2 * -1);
+  height: var(--retract-width);
+  bottom: calc(0 - var(--retract-width));
 }
 .retract .retract-but.is-bottom.is-adjust {
-  bottom: -10px;
+  bottom: calc(var(--retract-width-adjust) - var(--retract-width));
 }
 .retract .retract-but.is-bottom .retract-icon {
   transform: rotate(-90deg);