@cgboiler/biz-mobile 1.1.1 → 1.2.0

package/es/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./org-picker";
 export * from "./project-select";
 declare namespace _default {
     export { install };
@@ -5,5 +6,7 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "1.1.0";
-export { ProjectSelect };
+export const version: "1.1.2";
+import OrgPicker from './org-picker';
+import ProjectSelect from './project-select';
+export { OrgPicker, ProjectSelect };

package/es/index.js

@@ -1,7 +1,9 @@
-import { ProjectSelect } from "./project-select";
-const version = "1.1.0";
+import OrgPicker from "./org-picker";
+import ProjectSelect from "./project-select";
+const version = "1.1.2";
 function install(app) {
   const components = [
+    OrgPicker,
     ProjectSelect
   ];
   components.forEach((item) => {
@@ -12,12 +14,14 @@ function install(app) {
     }
   });
 }
+export * from "./org-picker";
 export * from "./project-select";
 var stdin_default = {
   install,
   version
 };
 export {
+  OrgPicker,
   ProjectSelect,
   stdin_default as default,
   install,

package/es/org-picker/OrgPicker.d.ts

@@ -0,0 +1,49 @@
+import { type OrgItem } from './types';
+import './index.less';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: import("vue").PropType<OrgItem | OrgItem[] | null>;
+        default: () => null;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    'onUpdate:modelValue': {
+        type: import("vue").PropType<(val: OrgItem | OrgItem[] | null) => void>;
+    };
+    'onUpdate:show': {
+        type: import("vue").PropType<(val: boolean) => void>;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:show" | "update:modelValue")[], "update:show" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: import("vue").PropType<OrgItem | OrgItem[] | null>;
+        default: () => null;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    'onUpdate:modelValue': {
+        type: import("vue").PropType<(val: OrgItem | OrgItem[] | null) => void>;
+    };
+    'onUpdate:show': {
+        type: import("vue").PropType<(val: boolean) => void>;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: OrgItem | OrgItem[] | null;
+    show: boolean;
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/org-picker/OrgPicker.js

@@ -0,0 +1,111 @@
+import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import "./_atomic.css";
+import { defineComponent, ref, computed } from "vue";
+import { ActionSheet, Search, List, Image } from "vant";
+import { orgPickerProps } from "./types";
+import { useApi } from "./useApi";
+import "./index.css";
+var stdin_default = defineComponent({
+  name: "OrgPicker",
+  props: orgPickerProps,
+  emits: ["update:show", "update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      orgList,
+      getOrgList
+    } = useApi();
+    getOrgList();
+    const handleSelect = (item) => {
+      if (props.multiple) {
+        const currentValue = props.modelValue ? [...Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]] : [];
+        const index = currentValue.findIndex((selected) => selected.id === item.id);
+        if (index > -1) {
+          currentValue.splice(index, 1);
+        } else {
+          currentValue.push(item);
+        }
+        emit("update:modelValue", currentValue);
+      } else {
+        emit("update:modelValue", item);
+        emit("update:show", false);
+      }
+    };
+    const handleConfirm = () => {
+      emit("update:show", false);
+    };
+    const keyword = ref("");
+    const loading = ref(false);
+    const finished = ref(true);
+    const filteredOrgList = computed(() => {
+      return orgList.value.filter((item) => {
+        return item.name.toLowerCase().includes(keyword.value.toLowerCase());
+      }).slice(0, 300);
+    });
+    const isSelected = (item) => {
+      var _a;
+      if (!props.modelValue)
+        return false;
+      if (props.multiple) {
+        const selectedItems = Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue];
+        return selectedItems.some((selected) => selected.id === item.id);
+      } else {
+        return ((_a = props.modelValue) == null ? void 0 : _a.id) === item.id;
+      }
+    };
+    const onLoad = () => {
+      finished.value = true;
+    };
+    return () => _createVNode(ActionSheet, {
+      "show": props.show,
+      "onUpdate:show": (val) => emit("update:show", val),
+      "title": "\u9009\u62E9\u4EBA\u5458",
+      "closeOnClickAction": !props.multiple
+    }, {
+      default: () => [_createVNode("div", {
+        "class": "org-list"
+      }, [_createVNode(Search, {
+        "modelValue": keyword.value,
+        "onUpdate:modelValue": ($event) => keyword.value = $event,
+        "placeholder": "\u641C\u7D22\u4EBA\u5458",
+        "class": "search-bar"
+      }, null), _createVNode(List, {
+        "loading": loading.value,
+        "finished": finished.value,
+        "onLoad": onLoad
+      }, {
+        default: () => [filteredOrgList.value.map((item) => _createVNode("div", {
+          "class": ["org-item", isSelected(item) ? "selected" : ""],
+          "onClick": () => handleSelect(item)
+        }, [_createVNode(Image, {
+          "class": "org-avatar",
+          "width": "40",
+          "height": "40",
+          "src": item.avatar
+        }, null), _createVNode("div", {
+          "class": "org-name"
+        }, [item.name])]))]
+      }), props.multiple && _createVNode("div", {
+        "class": "bottom-section"
+      }, [Array.isArray(props.modelValue) && props.modelValue.length > 0 && _createVNode("div", {
+        "class": "selected-items"
+      }, [props.modelValue.map((item) => _createVNode("div", {
+        "key": item.id,
+        "class": "selected-tag",
+        "onClick": () => handleSelect(item)
+      }, [_createVNode(Image, {
+        "class": "tag-avatar",
+        "src": item.avatar
+      }, null)]))]), _createVNode("div", {
+        "class": "action-buttons"
+      }, [_createVNode("div", {
+        "class": "confirm-button",
+        "onClick": handleConfirm
+      }, [_createTextVNode("\u786E\u8BA4")])])])])]
+    });
+  }
+});
+export {
+  stdin_default as default
+};

package/es/org-picker/_atomic.css

@@ -0,0 +1,32 @@
+
+.cgx-atm .flex {
+  align-items: initial;
+  flex-direction: initial;
+  justify-content: initial;
+  flex-wrap: initial;
+}
+.cgx-atm .flex-row {
+  flex-direction: row;
+}
+.cgx-atm .flex-col {
+  flex-direction: column;
+}
+.cgx-atm .justify-center {
+  justify-content: center;
+}
+.cgx-atm .justify-between {
+  justify-content: space-between;
+}
+.cgx-atm .justify-around {
+  justify-content: space-around;
+}
+.cgx-atm .justify-end {
+  justify-content: flex-end;
+}
+.cgx-atm .items-center {
+  align-items: center;
+}
+.cgx-atm .flex-wrap {
+  flex-wrap: wrap;
+}
+  

package/es/org-picker/index.css

@@ -0,0 +1 @@
+:root:root{--van-action-sheet-max-height: 100%}.org-list{height:90vh;display:flex;flex-direction:column}.org-list .search-bar{position:-webkit-sticky;position:-webkit-sticky;position:sticky;top:0;z-index:1}.org-list .bottom-section{border-top:1px solid #eee;background-color:#fff}.org-list .bottom-section .selected-items{display:flex;flex-wrap:nowrap;padding:12px 16px;gap:12px;background-color:#fff;overflow-x:auto;height:35px}.org-list .bottom-section .selected-items .selected-tag{flex-shrink:0;background:none;border:none;padding:0;margin:0}.org-list .bottom-section .selected-items .selected-tag .tag-avatar{width:32px;height:32px;cursor:pointer;border-radius:4px;overflow:hidden}.org-list .van-list{flex:1;overflow-y:auto;padding:0 16px}.org-list .org-item{padding:12px 0;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;gap:12px}.org-list .org-item.selected{color:var(--van-primary-color)}.org-list .org-item .org-avatar{flex-shrink:0;border-radius:4px;overflow:hidden}.org-list .org-item .org-name{font-size:14px;flex:1}.org-list .org-item:last-child{border-bottom:none}.org-list .action-buttons{padding:16px;display:flex;justify-content:center;border-top:1px solid #eee}.org-list .action-buttons .confirm-button{background-color:var(--van-primary-color);color:#fff;padding:10px 0;border-radius:4px;text-align:center;width:100%;font-size:14px}

package/es/org-picker/index.d.ts

@@ -0,0 +1,3 @@
+import OrgPicker from './OrgPicker';
+export default OrgPicker;
+export * from './types';

package/es/org-picker/index.js

@@ -0,0 +1,6 @@
+import OrgPicker from "./OrgPicker";
+var stdin_default = OrgPicker;
+export * from "./types";
+export {
+  stdin_default as default
+};

package/es/org-picker/index.less

@@ -0,0 +1,96 @@
+:root:root {
+  --van-action-sheet-max-height: 100%;
+}
+.org-list {
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+
+  .search-bar {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .bottom-section {
+    border-top: 1px solid #eee;
+    background-color: #fff;
+
+    .selected-items {
+      display: flex;
+      flex-wrap: nowrap;
+      padding: 12px 16px;
+      gap: 12px;
+      background-color: #fff;
+      overflow-x: auto;
+      height: 35px;
+
+      .selected-tag {
+        flex-shrink: 0;
+        background: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+
+        .tag-avatar {
+          width: 32px;
+          height: 32px;
+          cursor: pointer;
+          border-radius: 4px;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+
+  .van-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 16px;
+  }
+
+  .org-item {
+    padding: 12px 0;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    &.selected {
+      color: var(--van-primary-color);
+    }
+
+    .org-avatar {
+      flex-shrink: 0;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .org-name {
+      font-size: 14px;
+      flex: 1;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .action-buttons {
+    padding: 16px;
+    display: flex;
+    justify-content: center;
+    border-top: 1px solid #eee;
+
+    .confirm-button {
+      background-color: var(--van-primary-color);
+      color: white;
+      padding: 10px 0;
+      border-radius: 4px;
+      text-align: center;
+      width: 100%;
+      font-size: 14px;
+    }
+  }
+}

package/es/org-picker/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/org-picker/style/index.js

@@ -0,0 +1 @@
+import "../index.css";

package/es/org-picker/style/less.d.ts

@@ -0,0 +1 @@
+export {};

package/es/org-picker/style/less.js

@@ -0,0 +1 @@
+import "../index.less";

package/es/org-picker/types.d.ts

@@ -0,0 +1,27 @@
+import { ExtractPropTypes, PropType } from 'vue';
+export interface OrgItem {
+    id: string | number;
+    name: string;
+    avatar?: string;
+}
+export declare const orgPickerProps: {
+    modelValue: {
+        type: PropType<OrgItem | OrgItem[] | null>;
+        default: () => null;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    'onUpdate:modelValue': {
+        type: PropType<(val: OrgItem | OrgItem[] | null) => void>;
+    };
+    'onUpdate:show': {
+        type: PropType<(val: boolean) => void>;
+    };
+};
+export type OrgPickerProps = ExtractPropTypes<typeof orgPickerProps>;

package/es/org-picker/types.js

@@ -0,0 +1,23 @@
+const orgPickerProps = {
+  modelValue: {
+    type: [Object, Array],
+    default: () => null
+  },
+  show: {
+    type: Boolean,
+    default: false
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  "onUpdate:modelValue": {
+    type: Function
+  },
+  "onUpdate:show": {
+    type: Function
+  }
+};
+export {
+  orgPickerProps
+};

package/es/org-picker/useApi.d.ts

@@ -0,0 +1,13 @@
+import { type OrgItem } from './types';
+export declare const useApi: () => {
+    orgList: import("vue").Ref<{
+        id: string | number;
+        name: string;
+        avatar?: string | undefined;
+    }[], OrgItem[] | {
+        id: string | number;
+        name: string;
+        avatar?: string | undefined;
+    }[]>;
+    getOrgList: () => Promise<void>;
+};