@ibiz-template/vue3-components 0.7.30 → 0.7.31-alpha.0

package/es/common/index.mjs

@@ -24,6 +24,7 @@ import { IBizCarouselCard } from './carousel-card/carousel-card.mjs';
 import { IBizEmojiSelect } from './emoji-select/emoji-select.mjs';
 import { IBizQuickEdit } from './quick-edit/quick-edit.mjs';
 import { IBizFullscreenToolbar } from './fullscreen-toolbar/fullscreen-toolbar.mjs';
+import { IBizPqlEditor } from './pql-editor/pql-editor.mjs';
 
 "use strict";
 const IBizCommonComponents = {
@@ -65,6 +66,7 @@ const IBizCommonComponents = {
     v.component(CustomTheme.name, CustomTheme);
     v.component(IBizCarouselCard.name, IBizCarouselCard);
     v.component(IBizFullscreenToolbar.name, IBizFullscreenToolbar);
+    v.component(IBizPqlEditor.name, IBizPqlEditor);
   }
 };
 

package/es/common/pql-editor/components/index.d.ts

@@ -0,0 +1 @@
+export * from './pql-editor-suggestion/pql-editor-suggestion';

package/es/common/pql-editor/components/index.mjs

@@ -0,0 +1,3 @@
+export { IBizPqlEditorSuggestion } from './pql-editor-suggestion/pql-editor-suggestion.mjs';
+
+"use strict";

package/es/common/pql-editor/components/pql-editor-suggestion/pql-editor-suggestion.css

@@ -0,0 +1 @@
+.ibiz-pql-editor-suggestion{max-height:320px;padding:var(--ibiz-spacing-base-tight) 0;overflow-y:auto}.ibiz-pql-editor-suggestion-item{display:flex;align-items:center;min-height:40px;padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-base-loose);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;outline:0}.ibiz-pql-editor-suggestion-item:hover{background-color:var(--ibiz-color-fill-1)}.ibiz-pql-editor-suggestion-item__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/es/common/pql-editor/components/pql-editor-suggestion/pql-editor-suggestion.d.ts

@@ -0,0 +1,28 @@
+import { PropType, VNode } from 'vue';
+import './pql-editor-suggestion.scss';
+export declare const IBizPqlEditorSuggestion: import("vue").DefineComponent<{
+    items: {
+        type: PropType<IData[]>;
+        default: () => never[];
+    };
+    renderItem: {
+        type: PropType<(_item: IData) => VNode>;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    handleClick: (item: IData) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (_item: IData) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<IData[]>;
+        default: () => never[];
+    };
+    renderItem: {
+        type: PropType<(_item: IData) => VNode>;
+    };
+}>> & {
+    onSelect?: ((_item: IData) => any) | undefined;
+}, {
+    items: IData[];
+}, {}>;

package/es/common/pql-editor/components/pql-editor-suggestion/pql-editor-suggestion.mjs

@@ -0,0 +1,49 @@
+import { createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import './pql-editor-suggestion.css';
+
+"use strict";
+const IBizPqlEditorSuggestion = /* @__PURE__ */ defineComponent({
+  name: "IBizPqlEditorSuggestion",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    renderItem: {
+      type: Function
+    }
+  },
+  emits: {
+    select: (_item) => true
+  },
+  setup(_props, {
+    emit
+  }) {
+    const ns = useNamespace("pql-editor-suggestion");
+    const handleClick = (item) => {
+      emit("select", item);
+    };
+    return {
+      ns,
+      handleClick
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [this.items.map((item) => {
+      return createVNode("div", {
+        "class": [this.ns.b("item")],
+        "onClick": (e) => {
+          e.stopPropagation();
+          this.handleClick(item);
+        }
+      }, [this.renderItem ? this.renderItem(item) : createVNode("div", {
+        "class": this.ns.be("item", "text")
+      }, [item.label || ""])]);
+    })]);
+  }
+});
+
+export { IBizPqlEditorSuggestion };

package/es/common/pql-editor/pql-editor.css

@@ -0,0 +1 @@
+.ibiz-pql-editor{display:flex;flex-direction:column;width:100%;height:100%;padding:var(--ibiz-spacing-base-tight);overflow:auto;font-size:var(--ibiz-font-size-regular);border:1px solid var(--ibiz-color-border);border-radius:var(--ibiz-border-radius-small);outline:0}.ibiz-pql-editor [data-slate-node=element][data-slate-void=true]{margin:var(--ibiz-spacing-extra-tight)}.ibiz-pql-editor-content{flex:1 0 0}.ibiz-pql-editor-content .w-e-text-placeholder{top:var(--ibiz-spacing-super-tight);left:0;font-style:normal}.ibiz-pql-editor-content .w-e-text-container [data-slate-editor]{padding:0}.ibiz-pql-editor-content .w-e-text-container [data-slate-editor] p{margin:0}.ibiz-pql-editor-footer{flex:0 0 auto;font-size:var(--ibiz-font-size-small);color:var(--ibiz-color-danger)}.ibiz-pql-editor-error-msg{position:relative}.ibiz-pql-editor-error-msg::after{position:absolute;bottom:-.12rem;left:0;width:100%;height:.25rem;content:"";background:linear-gradient(135deg,transparent,transparent 45%,var(--ibiz-color-danger),transparent 55%,transparent 100%),linear-gradient(45deg,transparent,transparent 45%,var(--ibiz-color-danger),transparent 55%,transparent 100%);background-repeat:repeat-x,repeat-x;background-size:.5rem .5rem}

package/es/common/pql-editor/pql-editor.d.ts

@@ -0,0 +1,68 @@
+import { PropType, VNode } from 'vue';
+import { IDomEditor } from '@wangeditor/editor';
+import { ISchemaField } from '../../interface';
+import './pql-editor.scss';
+export declare const IBizPqlEditor: import("vue").DefineComponent<{
+    fields: {
+        type: PropType<ISchemaField[]>;
+        default: () => never[];
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    context: {
+        type: PropType<IContext>;
+        required: true;
+    };
+    renderItem: {
+        type: PropType<(_item: IData) => VNode>;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    editorRef: import("vue").Ref<HTMLElement | undefined>;
+    editor: IDomEditor | undefined;
+    errorMsg: import("vue").Ref<string | undefined>;
+    verify: () => boolean;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (_value: string) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    fields: {
+        type: PropType<ISchemaField[]>;
+        default: () => never[];
+    };
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    context: {
+        type: PropType<IContext>;
+        required: true;
+    };
+    renderItem: {
+        type: PropType<(_item: IData) => VNode>;
+    };
+}>> & {
+    onChange?: ((_value: string) => any) | undefined;
+}, {
+    value: string;
+    fields: ISchemaField[];
+    readonly: boolean;
+    placeholder: string;
+}, {}>;