@gct-paas/core-web 0.1.4-dev.7 → 0.1.4-dev.9

package/es/components/layout/flex-container/flex-container.mjs

@@ -1,19 +1,23 @@
-import { isVNode, defineComponent, createVNode } from 'vue';
+import { defineComponent, createVNode, isVNode } from 'vue';
 import { FlexItem } from '../flex-item/flex-item.mjs';
 import { useNamespace } from '@gct-paas/core';
-import './flex-container.scss';
+import './flex-container.css';/* empty css                     */
 
-"use strict";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * flex 布局容器
+ */
 function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const FlexContainer = /* @__PURE__ */ defineComponent({
-  name: "FlexContainer",
+  name: 'FlexContainer',
   props: {
     layout: Object
   },
   setup(props) {
-    const ns = useNamespace("flex-container");
+    const ns = useNamespace('flex-container');
     const getStyle = () => {
       const style = {};
       if (props.layout) {
@@ -42,7 +46,7 @@ const FlexContainer = /* @__PURE__ */ defineComponent({
       }
       return style;
     };
-    const getItemStyle = (model) => {
+    const getItemStyle = model => {
       const style = {};
       if (model) {
         const {
@@ -72,7 +76,7 @@ const FlexContainer = /* @__PURE__ */ defineComponent({
     return createVNode("div", {
       "class": this.ns.b(),
       "style": this.getStyle()
-    }, [items.map((item) => {
+    }, [items.map(item => {
       if (!item) {
         return null;
       }
@@ -87,4 +91,4 @@ const FlexContainer = /* @__PURE__ */ defineComponent({
   }
 });
 
-export { FlexContainer, FlexContainer as default };
+export { FlexContainer };

package/es/components/layout/flex-item/flex-item.mjs

@@ -1,14 +1,16 @@
 import { defineComponent, createVNode } from 'vue';
 import { useNamespace } from '@gct-paas/core';
 
-"use strict";
+/**
+ * flex 布局容器项
+ */
 const FlexItem = /* @__PURE__ */ defineComponent({
-  name: "FlexItem",
+  name: 'FlexItem',
   props: {
     layout: Object
   },
   setup(props) {
-    const ns = useNamespace("flex-item");
+    const ns = useNamespace('flex-item');
     const getStyle = () => {
       const style = {};
       if (props.layout) {
@@ -20,19 +22,19 @@ const FlexItem = /* @__PURE__ */ defineComponent({
           flexShrink
         } = props.layout;
         if (order != null) {
-          style["order"] = order;
+          style['order'] = order;
         }
         if (alignSelf != null) {
-          style["align-self"] = alignSelf;
+          style['align-self'] = alignSelf;
         }
         if (flexBasis != null) {
-          style["flex-basis"] = flexBasis;
+          style['flex-basis'] = flexBasis;
         }
         if (flexGrow != null) {
-          style["flex-grow"] = flexGrow;
+          style['flex-grow'] = flexGrow;
         }
         if (flexShrink != null) {
-          style["flex-shrink"] = flexShrink;
+          style['flex-shrink'] = flexShrink;
         }
       }
       return style;
@@ -50,4 +52,4 @@ const FlexItem = /* @__PURE__ */ defineComponent({
   }
 });
 
-export { FlexItem, FlexItem as default };
+export { FlexItem };

package/es/components/layout/grid-container/grid-container.mjs

@@ -1,17 +1,21 @@
-import { isVNode, defineComponent, createVNode, resolveComponent } from 'vue';
+import { defineComponent, createVNode, resolveComponent, isVNode } from 'vue';
 import { useNamespace } from '@gct-paas/core';
 
-"use strict";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * 栅格布局
+ */
 function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 const GridContainer = /* @__PURE__ */ defineComponent({
-  name: "GridContainer",
+  name: 'GridContainer',
   props: {
     layout: Object
   },
   setup() {
-    const ns = useNamespace("grid-container");
+    const ns = useNamespace('grid-container');
     return {
       ns
     };
@@ -27,7 +31,7 @@ const GridContainer = /* @__PURE__ */ defineComponent({
       "class": this.ns.b(),
       "wrap": true,
       "gutter": l.gutter
-    }, _isSlot(_slot = items.map((item) => {
+    }, _isSlot(_slot = items.map(item => {
       if (!item) {
         return null;
       }
@@ -44,4 +48,4 @@ const GridContainer = /* @__PURE__ */ defineComponent({
   }
 });
 
-export { GridContainer, GridContainer as default };
+export { GridContainer };

package/es/components/layout/view-container/view-container.css

@@ -0,0 +1,83 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-view-container {
+  background-color: white;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.gct-view-container-header {
+  flex-shrink: 0;
+}
+
+.gct-view-container-content {
+  flex-grow: 1;
+  overflow: hidden auto;
+}
+
+.gct-view-container-footer {
+  flex-shrink: 0;
+}

package/es/components/layout/view-container/view-container.mjs

@@ -1,10 +1,9 @@
 import { defineComponent, createVNode } from 'vue';
 import { useNamespace } from '@gct-paas/core';
-import './view-container.scss';
+import './view-container.css';/* empty css                     */
 
-"use strict";
 const ViewContainer = /* @__PURE__ */ defineComponent({
-  name: "ViewContainer",
+  name: 'ViewContainer',
   props: {
     context: {
       type: Object
@@ -18,7 +17,7 @@ const ViewContainer = /* @__PURE__ */ defineComponent({
     }
   },
   setup() {
-    const ns = useNamespace("view-container");
+    const ns = useNamespace('view-container');
     return {
       ns
     };
@@ -27,11 +26,11 @@ const ViewContainer = /* @__PURE__ */ defineComponent({
     return createVNode("div", {
       "class": this.ns.b()
     }, [this.$slots.header ? createVNode("div", {
-      "class": this.ns.b("header")
+      "class": this.ns.b('header')
     }, [this.$slots.header()]) : null, createVNode("div", {
-      "class": this.ns.b("content")
+      "class": this.ns.b('content')
     }, [this.$slots.default?.()]), this.$slots.footer ? createVNode("div", {
-      "class": this.ns.b("footer")
+      "class": this.ns.b('footer')
     }, [this.$slots.footer()]) : null]);
   }
 });

package/es/components/svg-icon/svg-icon.css

@@ -0,0 +1,73 @@
+@charset "UTF-8";
+/* stylelint-disable scss/no-global-function-names */
+/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
+/**
+ * 定义 Block 块
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include b('button') {
+ *     padding: 10px;
+ *   }
+ */
+/**
+ * 定义 Element 元素
+ * @param {String|List} $element - Element 元素名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include e('text') {
+ *       color: #000;
+ *     }
+ *   }
+ *   // 或传入多个元素
+ *   @include b('button') {
+ *     @include e(('text', 'icon')) {
+ *       margin: 5px;
+ *     }
+ *   }
+ */
+/**
+ * 定义 Modifier 修饰符
+ * @param {String|List} $modifier - Modifier 修饰符名称，支持单个或多个
+ * @example
+ *   @include b('button') {
+ *     @include m('primary') {
+ *       background: blue;
+ *     }
+ *   }
+ *   // 或传入多个修饰符
+ *   @include b('button') {
+ *     @include m(('primary', 'large')) {
+ *       background: blue;
+ *       font-size: 16px;
+ *     }
+ *   }
+ */
+/**
+ * 定义状态选择器
+ * @param {String} $state - 状态名称
+ * @example
+ *   @include b('button') {
+ *     @include when('disabled') {
+ *       opacity: 0.5;
+ *     }
+ *   }
+ */
+/**
+ * 深色主题样式
+ * @param {String} $block - Block 块名称
+ * @example
+ *   @include dark('button') {
+ *     background: #333;
+ *     color: #fff;
+ *   }
+ */
+/* stylelint-disable scss/no-global-function-names */
+.gct-svg-icon {
+  display: inline-block;
+  overflow: hidden;
+  fill: currentcolor;
+  vertical-align: -0.15em;
+}
+.gct-svg-icon--spin {
+  animation: loadingCircle 1s infinite linear;
+}

package/es/components/svg-icon/svg-icon.vue.d.ts

@@ -0,0 +1,40 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    prefix: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    spin: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    prefix: {
+        type: StringConstructor;
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    spin: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    size: string | number;
+    spin: boolean;
+    prefix: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/es/components/svg-icon/svg-icon.vue.mjs

@@ -0,0 +1,50 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, unref, createElementVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+
+const _hoisted_1 = ["xlink:href"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "svg-icon",
+  props: {
+    prefix: {
+      type: String,
+      default: "icon"
+    },
+    name: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: [Number, String],
+      default: 16
+    },
+    spin: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const ns = useNamespace("svg-icon");
+    const props = __props;
+    const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+    const getStyle = computed(() => {
+      const { size } = props;
+      let s = `${size}`;
+      s = `${s.replace("px", "")}px`;
+      return {
+        width: s,
+        height: s
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        class: normalizeClass([_ctx.$attrs.class, unref(ns).b(), __props.spin && unref(ns).m("spin")]),
+        style: normalizeStyle(getStyle.value),
+        "aria-hidden": "true"
+      }, [
+        createElementVNode("use", { "xlink:href": symbolId.value }, null, 8, _hoisted_1)
+      ], 6);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/svg-icon/svg-icon.vue3.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './svg-icon.vue.mjs';
+import './svg-icon.css';/* empty css               */
+
+
+
+export { _sfc_main as default };

package/es/create-app-vue.d.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+/**
+ * 核心 Web 库的外部使用注册，在创建 app 时调用
+ *
+ * @export
+ * @param {App} app
+ * @return {*}  {Promise<void>}
+ */
+export declare function coreWebCreateAppVue(app: App): Promise<void>;

package/es/create-app-vue.mjs

@@ -0,0 +1,17 @@
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
+import Comps from './components/index.mjs';
+import * as Icons from '@ant-design/icons-vue';
+import { setupDirectives } from './directives/index.mjs';
+import ColorPicker from './modules/color-picker/src/ColorPicker.vue.mjs';
+
+async function coreWebCreateAppVue(app) {
+  setupDirectives(app);
+  app.use(Comps);
+  Object.entries(Icons).forEach(([key, component]) => {
+    app.component(key, component);
+  });
+  app.component(ColorPicker.name, ColorPicker);
+  app.component(OverlayScrollbarsComponent.__name, OverlayScrollbarsComponent);
+}
+
+export { coreWebCreateAppVue };

package/es/directives/drag-resize.d.ts

@@ -0,0 +1,4 @@
+import { App, Directive } from 'vue';
+declare const dragResizeDirective: Directive;
+export declare function setupDragResizeDirective(app: App): void;
+export default dragResizeDirective;

package/es/directives/drag-resize.mjs

@@ -0,0 +1,42 @@
+const dragResizeDirective = {
+  mounted(el, binding) {
+    if (!binding.value) return false;
+    binding.instance?.$nextTick(() => {
+      const minWidth = binding.value;
+      const dragDom = el;
+      const resizeElL = document.createElement("div");
+      dragDom.appendChild(resizeElL);
+      resizeElL.style.cursor = "col-resize";
+      resizeElL.style.position = "absolute";
+      resizeElL.style.height = "100%";
+      resizeElL.style.width = "5px";
+      resizeElL.style.right = "0px";
+      resizeElL.style.top = "0px";
+      resizeElL.style.background = "rgba(255, 0, 0, 0);";
+      resizeElL.onmousedown = (e) => {
+        const elW = dragDom.clientWidth;
+        const clientX = e.clientX;
+        document.onmousemove = function(e2) {
+          e2.preventDefault();
+          const l = e2.clientX - clientX;
+          let nw = elW + l;
+          nw = nw < minWidth ? minWidth : nw;
+          dragDom.setAttribute("style", `width:${nw}px !important;`);
+          const resizeEvent = new CustomEvent("drag-resize-width", {
+            detail: { width: nw, resizing: true }
+          });
+          el.dispatchEvent(resizeEvent);
+        };
+        document.onmouseup = function() {
+          document.onmousemove = null;
+          document.onmouseup = null;
+        };
+      };
+    });
+  }
+};
+function setupDragResizeDirective(app) {
+  app.directive("dragResize", dragResizeDirective);
+}
+
+export { setupDragResizeDirective };

package/es/directives/index.d.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue';
+/**
+ * 注册全局通用指令
+ *
+ * @export
+ * @param {App} app
+ */
+export declare function setupDirectives(app: App): void;

package/es/directives/index.mjs

@@ -0,0 +1,9 @@
+import { setupDragResizeDirective } from './drag-resize.mjs';
+import { setupLoadingDirective } from './target-loading.mjs';
+
+function setupDirectives(app) {
+  setupDragResizeDirective(app);
+  setupLoadingDirective(app);
+}
+
+export { setupDirectives };

package/es/directives/target-loading.d.ts

@@ -0,0 +1,4 @@
+import { Directive, App } from 'vue';
+declare const loadingDirective: Directive;
+export declare function setupLoadingDirective(app: App): void;
+export default loadingDirective;

package/es/directives/target-loading.mjs

@@ -0,0 +1,40 @@
+import '../modules/target-loading/src/target-loading.vue.mjs';
+import '../modules/target-loading/src/target-loading.css';/* empty css                                                 */
+import 'vue';
+import { createLoading } from '../modules/target-loading/src/createLoading.mjs';
+
+const loadingDirective = {
+  mounted(el, binding) {
+    const tip = el.getAttribute("loading-tip");
+    const background = el.getAttribute("loading-background");
+    const size = el.getAttribute("loading-size");
+    const fullscreen = !!binding.modifiers.fullscreen;
+    const instance = createLoading(
+      {
+        tip,
+        background,
+        size: size || "large",
+        loading: !!binding.value,
+        absolute: !fullscreen
+      },
+      fullscreen ? document.body : el
+    );
+    el.instance = instance;
+  },
+  updated(el, binding) {
+    const instance = el.instance;
+    if (!instance) return;
+    instance.setTip(el.getAttribute("loading-tip"));
+    if (binding.oldValue !== binding.value) {
+      instance.setLoading?.(binding.value && !instance.loading);
+    }
+  },
+  unmounted(el) {
+    el?.instance?.close();
+  }
+};
+function setupLoadingDirective(app) {
+  app.directive("target-loading", loadingDirective);
+}
+
+export { setupLoadingDirective };

package/es/editor/gct-form-check-switch/gct-form-check-switch.d.ts

@@ -19,7 +19,7 @@ export declare const GctFormCheckSwitch: import('vue').DefineComponent<import('v
 }>, {
     ns: import('@gct-paas/core').Namespace;
     c: EditorController<ICheckSwitchEditor>;
-    val: import('vue').WritableComputedRef<any, any> | null;
+    val: import('vue').WritableComputedRef<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     itemModel: {
         type: PropType<IFormItem>;

package/es/editor/gct-form-i18n/gct-form-i18n.d.ts

@@ -15,7 +15,7 @@ export declare const GctFormI18n: import('vue').DefineComponent<import('vue').Ex
     };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    val: import('vue').WritableComputedRef<any, any> | null;
+    val: import('vue').WritableComputedRef<any, any>;
     i18nConfigValue: import('vue').WritableComputedRef<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     c: {

package/es/editor/gct-form-info/gct-form-info.d.ts

@@ -11,7 +11,7 @@ export declare const GctFormInfo: import('vue').DefineComponent<import('vue').Ex
     };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    val: import('vue').WritableComputedRef<any, any> | null;
+    val: import('vue').WritableComputedRef<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     value: {
         type: StringConstructor;

package/es/editor/gct-form-length-unit/gct-form-length-unit.d.ts

@@ -19,7 +19,7 @@ export declare const GctFormLengthUnit: import('vue').DefineComponent<import('vu
 }>, {
     ns: import('@gct-paas/core').Namespace;
     c: LengthUnitEditorController;
-    val: import('vue').WritableComputedRef<any, any> | null;
+    val: import('vue').WritableComputedRef<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     itemModel: {
         type: PropType<IFormItem>;

package/es/editor/gct-form-number/gct-form-number.d.ts

@@ -11,7 +11,7 @@ export declare const GctFormNumber: import('vue').DefineComponent<import('vue').
     };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    val: import('vue').WritableComputedRef<any, any> | null;
+    val: import('vue').WritableComputedRef<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     model: {
         type: PropType<INumberEditor>;

package/es/editor/gct-form-radio/gct-form-radio.d.ts

@@ -15,7 +15,7 @@ export declare const GctFormRadio: import('vue').DefineComponent<import('vue').E
     };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    val: import('vue').WritableComputedRef<any, any> | null;
+    val: import('vue').WritableComputedRef<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     c: {
         type: PropType<IFormItemController>;

package/es/editor/gct-form-select/gct-form-select.d.ts

@@ -15,7 +15,7 @@ export declare const GctFormSelect: import('vue').DefineComponent<import('vue').
     };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    val: import('vue').WritableComputedRef<any, any> | null;
+    val: import('vue').WritableComputedRef<any, any>;
     options: import('vue').ComputedRef<import('@gct-paas/core').IDictionaryItem[]>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "update:value"[], "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     c: {

package/es/editor/gct-form-switch/gct-form-switch.d.ts

@@ -11,7 +11,7 @@ export declare const GctFormSwitch: import('vue').DefineComponent<import('vue').
     };
 }>, {
     ns: import('@gct-paas/core').Namespace;
-    val: import('vue').WritableComputedRef<any, any> | null;
+    val: import('vue').WritableComputedRef<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     model: {
         type: PropType<ISwitchEditor>;