jobsys-explore 1.0.1

package/.eslintignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+.prettierrc.cjs
+vite.config.js

package/.eslintrc.cjs

@@ -0,0 +1,38 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true
+    },
+    globals: {
+        defineOptions: true
+    },
+    extends: ["eslint-config-prettier", "plugin:import/recommended", "eslint:recommended", "plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
+    overrides: [],
+    parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        ecmaFeatures: {
+            jsx: true
+        }
+    },
+    plugins: ["vue"],
+    rules: {
+        "import/prefer-default-export": "off",
+        "import/no-extraneous-dependencies": "off",
+        "import/no-duplicates": "off",
+        "import/named": "off",
+        "import/order": "off",
+        "import/first": "off",
+        "vue/attributes-order": "off",
+        "vue/no-mutating-props": "off",
+        "vue/no-reserved-component-names": "off",
+        "vue/no-v-html": "off",
+        "no-param-reassign": "off",
+        "no-console": "off",
+        "no-restricted-globals": "off",
+        "no-debugger": "off",
+        "no-use-before-define": "off",
+        "no-promise-executor-return": "off",
+        "spaced-comment": "off"
+    }
+};

package/.prettierrc.cjs

@@ -0,0 +1,38 @@
+module.exports = {
+    // 一行最多多少个字符
+    printWidth: 150,
+    // 指定每个缩进级别的空格数
+    tabWidth: 4,
+    // 使用制表符而不是空格缩进行
+    useTabs: true,
+    // 在语句末尾是否需要分号
+    semi: false,
+    // 是否使用单引号
+    singleQuote: false,
+    // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
+    quoteProps: "as-needed",
+    // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
+    trailingComma: "all",
+    // 在对象文字中的括号之间打印空格
+    bracketSpacing: true,
+    // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
+    arrowParens: "always",
+    // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
+    rangeStart: 0,
+    rangeEnd: Infinity,
+    // 指定要使用的解析器，不需要写文件开头的 @prettier
+    requirePragma: false,
+    // 不需要自动在文件开头插入 @prettier
+    insertPragma: false,
+    // 使用默认的折行标准 always\never\preserve
+    proseWrap: "preserve",
+    // 指定HTML文件的全局空格敏感度 css\strict\ignore
+    htmlWhitespaceSensitivity: "css",
+    // Vue文件脚本和样式标签缩进
+    vueIndentScriptAndStyle: false,
+    // 在 windows 操作系统中换行符通常是回车 (CR) 加换行分隔符 (LF)，也就是回车换行(CRLF)，
+    // 然而在 Linux 和 Unix 中只使用简单的换行分隔符 (LF)。
+    // 对应的控制字符为 "\n" (LF) 和 "\r\n"(CRLF)。auto意为保持现有的行尾
+    // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
+    endOfLine: "auto"
+}

package/README.md

@@ -0,0 +1,42 @@
+
+# TODOs
+
+---
+
+## 增强
+
+- [ ] ExploreForm
+  - [ ] Address
+  - [ ] Cascader
+  - [ ] Checkbox
+  - [ ] Date
+  - [ ] Group
+  - [ ] Html
+  - [ ] Input
+  - [ ] Number
+  - [ ] Radio
+  - [ ] Remote
+  - [ ] Select
+  - [ ] Switch
+  - [ ] Tag
+  - [ ] Text
+  - [ ] Time
+  - [ ] TreeSelect
+  - [ ] Uploader
+
+- [ ] ExploreSearch
+  - [ ] 同上
+
+
+- [ ] Field
+  - [ ] Disabled
+  - [ ] Help
+
+
+## 新增
+
+- [ ] 样式定制
+- [ ] 浮动按钮
+- [ ] 列表组件
+- [ ] 背景生成
+- [ ] 简易图表

package/components/button/ExButton.jsx

@@ -0,0 +1,119 @@
+import { defineComponent } from "vue"
+import { Button } from "vant"
+import "./index.less"
+
+/**
+ * 主题组件
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExButton",
+	props: {
+		/**
+		 * 按钮类型
+		 * @values primary, success, warning, danger
+		 */
+		type: { type: String, default: "default" },
+
+		/**
+		 * 按钮大小
+		 * @values large, normal, small, mini
+		 */
+		size: { type: String, default: "normal" },
+
+		/**
+		 * 失效状态
+		 */
+		disabled: { type: Boolean, default: false },
+
+		/**
+		 * 是否圆形按钮
+		 */
+		round: { type: Boolean, default: true },
+
+		/**
+		 * 是否块状按钮
+		 */
+		block: { type: Boolean, default: true },
+
+		/**
+		 * 按钮标签
+		 */
+		text: { type: String, default: "" },
+
+		/**
+		 * 按钮图标，需要使用
+		 *
+		 */
+		icon: { type: Object, default: null },
+
+		/**
+		 * 按钮图标位置
+		 * @values left, right
+		 */
+		iconPosition: { type: String, default: "left" },
+
+		/**
+		 * 请求状态控制器
+		 * @param {boolean} fetcher.loading 是否加载中
+		 */
+		fetcher: {
+			type: Object,
+			default: () => ({ loading: false }),
+		},
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/button)
+		 */
+		buttonProps: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	emits: [
+		/**
+		 * @event click
+		 * @param {Event} event 点击事件
+		 */
+		"click",
+	],
+
+	setup(props, { emit, slots }) {
+		const onClick = (e) => {
+			/**
+			 * @event click 点击事件
+			 */
+			emit("click", e)
+		}
+
+		const defaultLabel = () => {
+			return props.text || slots.default?.()
+		}
+
+		const defaultSlot = () => {
+			if (props.icon && props.iconPosition === "left") {
+				return [props.icon, defaultLabel()]
+			} else if (props.icon && props.iconPosition === "right") {
+				return [defaultLabel(), props.icon]
+			}
+			return [defaultLabel()]
+		}
+
+		return () => (
+			<Button
+				loading={props.fetcher.loading}
+				type={props.type}
+				size={props.size}
+				disabled={props.disabled}
+				round={props.round}
+				block={props.block}
+				onClick={onClick}
+				{...props.buttonProps}
+			>
+				{{
+					default: () => defaultSlot(),
+				}}
+			</Button>
+		)
+	},
+})

package/components/button/index.js

@@ -0,0 +1,4 @@
+import _ExButton from "./ExButton.jsx"
+import withInstall from "../../utils/withInstall"
+export const ExButton = withInstall(_ExButton)
+export default ExButton

package/components/button/index.less

@@ -0,0 +1,8 @@
+.van-button{
+	padding: 0 40px;
+}
+
+:root:root{
+	--van-button-normal-font-size: 16px;
+	--van-button-default-height: 48px;
+}

package/components/form/ExAddress.jsx

@@ -0,0 +1,125 @@
+import { computed, defineComponent, ref, watch } from "vue"
+import { Cascader } from "vant"
+import localData from "./addressData.json"
+import PickerWrapper, { pickerProps, pickerSlots } from "./PickerWrapper.jsx"
+import { defaultFieldProps, defaultOptionsProps, useOptionTrait } from "../utils"
+import { isArray, last } from "lodash-es"
+import { useFindTextsFromPath } from "../../hooks"
+
+/**
+ * 地址组件
+ *
+ * 数据优先级：`dataSource` > `url` > `本地数据`
+ *
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExAddress",
+	props: {
+		...defaultOptionsProps,
+		...defaultFieldProps,
+
+		modelValue: { type: [String, Number, Array], default: () => [] },
+
+		/**
+		 * 标题
+		 */
+		title: { type: String, default: "" },
+
+		/**
+		 *    生成哪个级别的数据
+		 *    1: 省, 2: 省市, 3: 省市区
+		 */
+		level: { type: Number, default: 3 },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { emit, slots, expose }) {
+		const defaultValue = isArray(props.modelValue) ? last(props.modelValue) : props.modelValue
+
+		const componentValue = ref(defaultValue)
+
+		watch(
+			() => props.modelValue,
+			() => (componentValue.value = isArray(props.modelValue) ? last(props.modelValue) : props.modelValue),
+		)
+
+		const pickerRef = ref(null)
+		const options = ref([])
+
+		const displayText = computed(() => {
+			if (props.modelValue.length === 0) {
+				return ""
+			}
+			return useFindTextsFromPath(options.value, props.modelValue, {
+				value: "code",
+				children: "children",
+				label: "name",
+			}).join("/")
+		})
+
+		useOptionTrait(options, props, localData)
+
+		const onFinish = ({ selectedOptions }) => {
+			pickerRef.value.close()
+			emit(
+				"update:modelValue",
+				selectedOptions.map((item) => item.code),
+			)
+		}
+
+		expose({ displayText })
+
+		/********** render **********/
+
+		return () => (
+			<PickerWrapper ref={pickerRef} {...pickerProps(props)}>
+				{{
+					...pickerSlots(slots, props),
+					default: () => (
+						<Cascader
+							v-model={componentValue.value}
+							fieldNames={{ text: "name", value: "code", children: "children" }}
+							closeable={false}
+							showHeader={false}
+							options={options.value}
+							onFinish={onFinish}
+						/>
+					),
+				}}
+			</PickerWrapper>
+		)
+	},
+})
+
+/**
+ *
+ * 根据地址编码获取完整的地址编码
+ *
+ * @param code
+ * @param {number} [level] 地址级别: 1: 省, 2: 省市, 3: 省市区
+ * @return {string[]|(string|*)[]|*[]}
+ */
+export function useAddressFullCode(code, level) {
+	code += ""
+	if (code && code.length === 6) {
+		if (!level) {
+			if (/0000$/.test(code)) {
+				level = 1
+			} else if (/00$/.test(code)) {
+				level = 2
+			} else {
+				level = 3
+			}
+		}
+		if (level === 1) {
+			return [`${code.substr(0, 2)}0000`]
+		}
+		if (level === 2) {
+			return [`${code.substr(0, 2)}0000`, `${code.substr(0, 4)}00`]
+		}
+		if (level === 3) {
+			return [`${code.substr(0, 2)}0000`, `${code.substr(0, 4)}00`, code]
+		}
+	}
+	return []
+}

package/components/form/ExCascader.jsx

@@ -0,0 +1,98 @@
+import { computed, defineComponent, ref, watch } from "vue"
+import PickerWrapper, { pickerProps, pickerSlots } from "./PickerWrapper.jsx"
+import { Button, Cascader } from "vant"
+import { defaultFieldProps, defaultOptionsProps, useOptionTrait } from "../utils"
+import { useFindTextsFromPath } from "../../hooks"
+
+/**
+ * ExCascader 级联选择
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExCascader",
+	props: {
+		...defaultOptionsProps,
+		...defaultFieldProps,
+
+		modelValue: { type: Array, default: () => [] },
+
+		/**
+		 * 标题
+		 */
+		title: { type: String, default: "" },
+
+		/**
+		 * 是否显示清除按钮
+		 */
+		clearable: { type: Boolean, default: false },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/cascader)
+		 */
+		cascaderProps: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { emit, slots, expose }) {
+		const defaultValue = props.modelValue?.[0] || ""
+
+		const componentValue = ref(defaultValue)
+
+		watch(
+			() => props.modelValue,
+			() => (componentValue.value = props.modelValue?.[0] || ""),
+		)
+
+		const pickerRef = ref(null)
+
+		const options = ref([])
+
+		const displayText = computed(() => {
+			if (props.modelValue.length === 0) {
+				return ""
+			}
+			return useFindTextsFromPath(options.value, props.modelValue).join("/")
+		})
+
+		useOptionTrait(options, props)
+
+		const onFinish = ({ selectedOptions }) => {
+			const value = selectedOptions.map((item) => item.value)
+			emit("change", value)
+			emit("update:modelValue", value)
+			pickerRef.value.close()
+		}
+
+		const onClear = () => {
+			emit("change", [])
+			emit("update:modelValue", [])
+			pickerRef.value.close()
+		}
+
+		expose({ displayText })
+
+		return () => (
+			<PickerWrapper ref={pickerRef} {...pickerProps(props)}>
+				{{
+					...pickerSlots(slots, props),
+					default: () => [
+						<Cascader
+							v-model={componentValue.value}
+							closeable={false}
+							showHeader={false}
+							options={options.value}
+							onFinish={onFinish}
+							{...props.cascaderProps}
+						/>,
+						props.clearable ? (
+							<div class={"ex-field-popup__clear-btn"}>
+								<Button block type={"primary"} plain={true} round={true} onClick={onClear}>
+									清除
+								</Button>
+							</div>
+						) : null,
+					],
+				}}
+			</PickerWrapper>
+		)
+	},
+})

package/components/form/ExCheckbox.jsx

@@ -0,0 +1,59 @@
+import { defineComponent, ref, watch } from "vue"
+import { defaultFieldProps, defaultOptionsProps, useOptionTrait } from "../utils"
+import { Checkbox, CheckboxGroup } from "vant"
+import ExField from "./ExField.jsx"
+import { pick } from "lodash-es"
+
+/**
+ * ExCheckbox 多选
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExCheckbox",
+	props: {
+		...defaultFieldProps,
+		...defaultOptionsProps,
+
+		modelValue: { type: Array, default: () => [] },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/cascader)
+		 */
+		checkboxProps: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { emit, slots }) {
+		const componentValue = ref(props.modelValue)
+
+		watch(
+			() => props.modelValue,
+			() => (componentValue.value = props.modelValue),
+		)
+
+		const options = ref([])
+
+		useOptionTrait(options, props)
+
+		const onChange = (value) => {
+			emit("update:modelValue", value)
+		}
+
+		const fieldProps = pick(props, Object.keys(defaultFieldProps))
+
+		return () => (
+			<ExField {...fieldProps}>
+				{{
+					...slots,
+					input: () => (
+						<CheckboxGroup v-model={componentValue.value} {...props.checkboxProps} onChange={onChange}>
+							{{
+								default: () =>
+									options.value.map((option) => <Checkbox name={option.value}>{{ default: () => option.text }}</Checkbox>),
+							}}
+						</CheckboxGroup>
+					),
+				}}
+			</ExField>
+		)
+	},
+})

package/components/form/ExDate.jsx

@@ -0,0 +1,130 @@
+import { computed, defineComponent, ref, watch } from "vue"
+import PickerWrapper, { pickerSlots } from "./PickerWrapper.jsx"
+import { DatePicker } from "vant"
+import { isDate } from "lodash-es"
+import { padZero } from "vant/es/utils"
+import { defaultFieldProps } from "../utils"
+
+/**
+ * ExDate 日期选择
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExDate",
+	props: {
+		...defaultFieldProps,
+
+		modelValue: { type: Date, default: () => [] },
+
+		/**
+		 * 标题
+		 */
+		title: { type: String, default: "选择日期" },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/date-picker)
+		 */
+		dateProps: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue"],
+	setup(props, { emit, slots, expose }) {
+		const columnsType = props.dateProps?.columnsType || ["year", "month", "day"]
+		const prepareDate = (date) => {
+			const value = []
+
+			if (!date) {
+				return value
+			}
+
+			columnsType.forEach((column) => {
+				if (column === "year") {
+					value.push(date.getFullYear())
+				} else if (column === "month") {
+					value.push(date.getMonth() + 1)
+				} else if (column === "day") {
+					value.push(date.getDate())
+				}
+			})
+
+			return value
+		}
+
+		let defaultValue = prepareDate(props.modelValue)
+
+		if (!defaultValue.length) {
+			const now = new Date()
+			defaultValue = [now.getFullYear(), now.getMonth() + 1, now.getDate()]
+		}
+
+		const componentValue = ref(defaultValue)
+
+		watch(
+			() => props.modelValue,
+			() => {
+				if (props.modelValue && isDate(props.modelValue)) {
+					componentValue.value = prepareDate(props.modelValue)
+				} else {
+					componentValue.value = props.modelValue
+				}
+			},
+		)
+
+		const pickerRef = ref(null)
+
+		const displayText = computed(() => {
+			if (props.modelValue) {
+				let text = ""
+				columnsType.forEach((column) => {
+					if (column === "year") {
+						text += `${props.modelValue.getFullYear()}年`
+					} else if (column === "month") {
+						text += `${padZero(props.modelValue.getMonth() + 1, 2)}月`
+					} else if (column === "day") {
+						text += `${padZero(props.modelValue.getDate(), 2)}日`
+					}
+				})
+
+				return text
+			}
+
+			return ""
+		})
+
+		expose({ displayText })
+
+		const onConfirm = ({ selectedValues }) => {
+			pickerRef.value.close()
+
+			const now = new Date()
+			let date = {}
+			columnsType.forEach((column, index) => {
+				if (column === "year") {
+					date.year = selectedValues[index]
+				} else if (column === "month") {
+					date.month = selectedValues[index] - 1
+				} else if (column === "day") {
+					date.date = selectedValues[index]
+				}
+			})
+
+			emit("update:modelValue", new Date(date.year || now.getFullYear(), date.month || now.getMonth(), date.date || now.getDate()))
+		}
+
+		return () => (
+			<PickerWrapper ref={pickerRef} closeable={false}>
+				{{
+					...pickerSlots(slots, props),
+					default: () => (
+						<DatePicker
+							v-model={componentValue.value}
+							onConfirm={onConfirm}
+							onCancel={() => pickerRef.value.close()}
+							title={props.title}
+							{...props.dateProps}
+						/>
+					),
+				}}
+			</PickerWrapper>
+		)
+	},
+})