@gct-paas/design 0.1.4-dev.7 → 0.1.4-dev.9

package/es/components/material/material-tabs/material-tabs.d.ts

@@ -0,0 +1,103 @@
+export declare const MaterialTabs: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    tabs: {
+        type: {
+            (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    active: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    onChange: (e: MouseEvent, tag: string) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:active")[], "change" | "update:active", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    tabs: {
+        type: {
+            (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (arrayLength: number): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            new (...items: {
+                id: string;
+                label: string;
+                icon: string;
+            }[]): {
+                id: string;
+                label: string;
+                icon: string;
+            }[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
+            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
+            of<T>(...items: T[]): T[];
+            fromAsync<T>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T | PromiseLike<T>> | ArrayLike<T | PromiseLike<T>>): Promise<T[]>;
+            fromAsync<T, U>(iterableOrArrayLike: AsyncIterable<T> | Iterable<T> | ArrayLike<T>, mapFn: (value: Awaited<T>, index: number) => U, thisArg?: any): Promise<Awaited<U>[]>;
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+    active: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:active"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/material/material-tabs/material-tabs.mjs

@@ -0,0 +1,69 @@
+import { defineComponent, createVNode } from 'vue';
+import { useNamespace } from '@gct-paas/core';
+import './material-tabs.css';/* empty css                    */
+
+const MaterialTabs = /* @__PURE__ */ defineComponent({
+  name: 'MaterialTabs',
+  props: {
+    tabs: {
+      type: Array,
+      required: true
+    },
+    active: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['update:active', 'change'],
+  setup(_props, {
+    emit
+  }) {
+    const ns = useNamespace('material-tabs');
+    const onChange = (e, tag) => {
+      e.stopPropagation();
+      emit('update:active', tag);
+      emit('change', tag);
+    };
+    return {
+      ns,
+      onChange
+    };
+  },
+  render() {
+    const slots = this.$slots.default ? this.$slots.default() : [];
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.b('left')
+    }, [this.tabs.map(tab => createVNode("div", {
+      "class": [this.ns.e('item'), this.ns.is('active', tab.id === this.active)],
+      "onClick": e => this.onChange(e, tab.id)
+    }, [createVNode("div", {
+      "class": this.ns.e('item-icon')
+    }, [createVNode("i", {
+      "class": `iconfont ${tab.icon}`
+    }, null)]), createVNode("div", {
+      "class": this.ns.e('item-label')
+    }, [tab.label])]))]), createVNode("div", {
+      "class": this.ns.b('right')
+    }, [slots.map(slot => {
+      const {
+        props
+      } = slot;
+      if (props) {
+        if (props.tabTag === this.active) {
+          props.style = {
+            display: 'block'
+          };
+        } else {
+          props.style = {
+            display: 'none'
+          };
+        }
+      }
+      return slot;
+    })])]);
+  }
+});
+
+export { MaterialTabs };

package/es/components/mobile-container/mobile-container.css

@@ -0,0 +1,134 @@
+@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-mobile-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background-color: #F2F4F7;
+  min-height: 800px;
+}
+
+.gct-mobile-container-phone {
+  width: 375px;
+  height: 800px;
+  background-color: #fff;
+  box-shadow: 0 0 20px 0 #F7F8FA;
+  border-radius: 0;
+}
+
+.gct-mobile-container-phone-header {
+  font-weight: 600;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  padding: 0 18px;
+}
+.gct-mobile-container-phone-header__right {
+  display: flex;
+  gap: 6px;
+}
+.gct-mobile-container-phone-header__right .iconfont {
+  font-size: 18px;
+}
+
+.gct-mobile-container-phone-content {
+  height: calc(100% - 44px);
+}
+
+.gct-mobile-container-phone-app-header {
+  font-weight: 600;
+  font-size: 16px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 18px;
+  border-bottom: 1px solid #E8EBF0;
+}
+.gct-mobile-container-phone-app-header.is-bg-color {
+  --van-primary-color: var(--ant-primary-color);
+  color: #fff;
+  background-color: var(--van-primary-color);
+}
+
+.gct-mobile-container-phone-app-header__center {
+  text-align: center;
+}
+
+.gct-mobile-container-phone-app-header__close {
+  transform: rotate(45deg);
+}
+
+.gct-mobile-container-phone-app-content {
+  height: calc(100% - 44px);
+  overflow: hidden;
+}
+.gct-mobile-container-phone-app-content.is-hidden-title-bar {
+  height: 100%;
+}

package/es/components/mobile-container/mobile-container.d.ts

@@ -0,0 +1,31 @@
+export declare const MobileContainer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    headerBgColor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTitleBar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    time: import('vue').Ref<string, string>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    headerBgColor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTitleBar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    headerBgColor: boolean;
+    showTitleBar: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/components/mobile-container/mobile-container.mjs

@@ -0,0 +1,81 @@
+import { defineComponent, createVNode, ref } from 'vue';
+import dayjs from 'dayjs';
+import { CloseOutlined } from '@ant-design/icons-vue';
+import { useNamespace } from '@gct-paas/core';
+import './mobile-container.css';/* empty css                       */
+
+const MobileContainer = /* @__PURE__ */ defineComponent({
+  name: 'MobileContainer',
+  props: {
+    headerBgColor: {
+      type: Boolean,
+      default: false
+    },
+    showTitleBar: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String
+      // TODO: 待实现
+      // default: () => gct.appInfo.name,
+    }
+  },
+  setup() {
+    const ns = useNamespace('mobile-container');
+    const time = ref(dayjs().format('HH:mm'));
+    return {
+      ns,
+      time
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "class": this.ns.b('phone')
+    }, [createVNode("div", {
+      "class": this.ns.b('phone-header')
+    }, [createVNode("div", {
+      "class": this.ns.be('phone-header', 'left')
+    }, [createVNode("span", {
+      "class": this.ns.be('phone-header', 'time')
+    }, [this.time])]), createVNode("div", {
+      "class": this.ns.be('phone-header', 'right')
+    }, [createVNode("span", {
+      "class": this.ns.be('phone-header', 'signal')
+    }, [createVNode("i", {
+      "class": "iconfont icon-xinhao_signal"
+    }, null)]), createVNode("span", {
+      "class": this.ns.be('phone-header', 'wifi')
+    }, [createVNode("i", {
+      "class": "iconfont icon-wuxianwangluo_wifi"
+    }, null)]), createVNode("span", {
+      "class": this.ns.be('phone-header', 'battery')
+    }, [createVNode("i", {
+      "class": "iconfont icon-dianchi"
+    }, null)])])]), createVNode("div", {
+      "class": [this.ns.b('phone-content')]
+    }, [this.showTitleBar !== false ? createVNode("div", {
+      "class": [this.ns.b('phone-app-header'), this.ns.is('bg-color', this.headerBgColor)]
+    }, [createVNode("div", {
+      "class": this.ns.be('phone-app-header', 'right')
+    }, [createVNode("span", {
+      "class": this.ns.be('phone-app-header', 'back')
+    }, [createVNode("i", {
+      "class": "iconfont icon-a-Leftarrow"
+    }, null)])]), createVNode("div", {
+      "class": this.ns.be('phone-app-header', 'center')
+    }, [createVNode("span", {
+      "class": this.ns.be('phone-app-header', 'text')
+    }, [this.title])]), createVNode("div", {
+      "class": this.ns.be('phone-app-header', 'right')
+    }, [createVNode("span", {
+      "class": this.ns.be('phone-app-header', 'close')
+    }, [createVNode(CloseOutlined, null, null)])])]) : null, createVNode("div", {
+      "class": [this.ns.b('phone-app-content'), this.ns.is('hidden-title-bar', !(this.showTitleBar !== false))]
+    }, [this.$slots.default?.()])])])]);
+  }
+});
+
+export { MobileContainer };

package/es/components/modal-name-editor/modal-name-editor.css

@@ -0,0 +1,117 @@
+@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-modal-name-editor__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 300px;
+}
+
+.gct-modal-name-editor.is-edit {
+  cursor: default;
+}
+
+.gct-modal-name-editor__input {
+  display: flex;
+  position: relative;
+  align-items: center;
+}
+.gct-modal-name-editor__input .anticon-loading {
+  margin-right: var(--gct-spacing-4);
+}
+.gct-modal-name-editor__input .ant-input.ant-input-sm {
+  padding: 0;
+  color: rgb(var(--gct-color-text-1));
+}
+.gct-modal-name-editor__input .ant-input.ant-input-sm.ant-input-disabled {
+  background-color: transparent;
+}
+.gct-modal-name-editor__input .ant-input[disabled] {
+  color: rgb(var(--gct-color-text-1));
+}
+
+.gct-modal-name-editor__error-info {
+  font-size: 12px;
+  line-height: 16px;
+  position: absolute;
+  z-index: 10000;
+  top: 24px;
+  padding: var(--gct-padding-2);
+  border-radius: var(--gct-border-radius-s);
+  background-color: var(--gct-color-danger-light-hover);
+  color: var(--gct-color-danger-hover);
+}
+
+.gct-modal-name-editor__edit {
+  margin-left: var(--gct-spacing-4);
+  color: rgb(var(--gct-colo-text-1));
+}
+
+.gct-modal-name-editor {
+  display: flex;
+  align-items: center;
+  height: 22px;
+  cursor: pointer;
+}

package/es/components/modal-name-editor/modal-name-editor.d.ts

@@ -0,0 +1,44 @@
+export declare const ModalNameEditor: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultName: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {
+    ns: import('@gct-paas/core').Namespace;
+    isEdit: import('vue').Ref<boolean, boolean>;
+    isError: import('vue').ComputedRef<boolean>;
+    isSaving: import('vue').Ref<boolean, boolean>;
+    val: import('vue').WritableComputedRef<string, string>;
+    nameInputRef: import('vue').Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+    onEditName: () => void;
+    onBlurOrEnter: () => void;
+    onChange: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("change" | "update:value")[], "change" | "update:value", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    defaultName: {
+        type: StringConstructor;
+        default: string;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}>, {
+    value: string;
+    max: number;
+    defaultName: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;