jobsys-explore 1.0.4 → 1.0.6

package/README.md

@@ -1,4 +1,3 @@
-
 # TODOs
 
 ---
@@ -6,32 +5,31 @@
 ## 增强
 
 - [ ] ExploreForm
-  - [ ] Address
-  - [ ] Cascader
-  - [ ] Checkbox
-  - [ ] Date
-  - [ ] Group
-  - [ ] Html
-  - [ ] Input
-  - [ ] Number
-  - [ ] Radio
-  - [ ] Remote
-  - [ ] Select
-  - [ ] Switch
-  - [ ] Tag
-  - [ ] Text
-  - [ ] Time
-  - [ ] TreeSelect
-  - [ ] Uploader
-
-- [ ] ExploreSearch
-  - [ ] 同上
-
-
-- [ ] Field
-  - [ ] Disabled
-  - [ ] Help
-
+    - [X] Address
+    - [X] Cascader
+    - [X] Checkbox
+    - [X] Date
+    - [ ] Group
+    - [ ] Html
+    - [X] Input
+    - [X] Number
+    - [X] Radio
+    - [ ] Remote
+    - [X] Select
+    - [X] Switch
+    - [] Tag
+    - [X] Text
+    - [X] Time
+    - [ ] TreeSelect
+    - [X] Uploader
+
+- [X] ExploreSearch
+    - [X] 同上
+
+
+- [X] Field
+    - [X] Disabled
+    - [X] Help
 
 ## 新增
 

package/components/form/ExField.jsx

@@ -92,7 +92,7 @@ export default defineComponent({
 				fieldSlots.label = labelElem
 			}
 
-			if (fieldSlots.input) {
+			if (!fieldSlots.input) {
 				fieldSlots.input = inputElem
 			}
 

package/components/form/FormItem.jsx

@@ -38,12 +38,14 @@ const render = (item, submitForm, { props, slots }) => {
 	const pickerTypes = ["select", "date", "datetime", "time", "address", "cascade"]
 	const isPicker = pickerTypes.includes(item.type)
 
+	// ExField 的 props
 	const fieldProps = pick(item, ["placeholder", "help", "required", "disabled", "rules", "readonly", "isLink", "fieldProps"])
 	fieldProps.label = item.title
 	fieldProps.name = item.key
 	fieldProps.placeholder = fieldProps.placeholder || (isPicker ? `请选择${item.title}` : `请填写${item.title}`)
 	fieldProps.rules = fieldProps.rules || []
 
+	// 具体组件的 props
 	let componentProps = pick(item, ["options"])
 	if (item.defaultProps) {
 		componentProps = { ...componentProps, ...item.defaultProps }

package/components/index.js

@@ -1,9 +1,10 @@
-export * from "./button"
-export * from "./theme"
-export * from "./form"
-export * from "./provider"
-export * from "./result"
-export * from "./qrcode"
-export * from "./pagination"
-export * from "./search"
-export * from "./uploader"
+export * from "./button"
+export * from "./theme"
+export * from "./form"
+export * from "./provider"
+export * from "./result"
+export * from "./qrcode"
+export * from "./pagination"
+export * from "./search"
+export * from "./uploader"
+export * from "./grid"

package/components/search/ExSearch.jsx

@@ -1,252 +1,253 @@
-import { defineComponent, reactive, ref } from "vue"
-import { Button, Icon, Popup, Search } from "vant"
-import { find, isArray, isFunction } from "lodash-es"
-import { createExpand, createField, createQuick } from "./components"
-import "./index.less"
-import ExGrid from "../grid/ExGrid.jsx"
-
-/**
- * ExSearch 搜索组件
- * @version 1.0.0
- */
-export default defineComponent({
-	name: "ExSearch",
-	props: {
-		modelValue: { type: String, default: "" },
-
-		/**
-		 * @typedef {Object} ExSearchItemConfig 搜索项
-		 * @property {string} key 搜索项的 key
-		 * @property {string} title 搜索项的标题
-		 * @property {string} type 搜索项的类型
-		 * @property {boolean} [primary] 为 true 列表展示为搜索框，该项存在会覆盖 keyword 配置
-		 * @property {boolean} [quick] 为 true 展示为快速检索项
-		 * @property {boolean|Object} [expandable] 搜索项是否展开
-		 * @property {Array|Function} [options] 搜索项的选项
-		 * @property {Object} [inputProps] 搜索项的输入框属性
-		 * @property {*} [defaultValue] 搜索项的值
-		 * @property {*} [_temp] 搜索项的临时值[内部使用]
-		 * */
-
-		/**
-		 *
-		 * 搜索项的配置, 详见 [ExSearchItemConfig](#exsearchitemconfig-配置)
-		 *
-		 */
-		columns: { type: Array, default: () => [] },
-
-		/**
-		 * 占位提示文字
-		 */
-		placeholder: { type: String, default: "请输入搜索关键词" },
-
-		/**
-		 * 名称，作为提交表单时的标识符
-		 */
-		keyword: { type: String, default: "keyword" },
-
-		/**
-		 * 搜索框左侧文本
-		 */
-		label: { type: String, default: "" },
-
-		/**
-		 * 是否将输入框设为只读状态，只读状态下无法输入内容
-		 */
-		readonly: { type: Boolean, default: false },
-
-		/**
-		 * 是否禁用输入框
-		 */
-		disabled: { type: Boolean, default: false },
-
-		/**
-		 * 输入框内容对齐方式
-		 * @values left, right, center
-		 */
-		inputAlign: { type: String, default: "left" },
-
-		/**
-		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/search)
-		 */
-		searchProps: { type: Object, default: () => ({}) },
-	},
-	emits: ["update:modelValue", "search"],
-	setup(props, { emit }) {
-		const componentValue = ref(props.modelValue)
-
-		const state = reactive({
-			queryForm: {}, // 搜索表单
-			quickColumns: [], //快速检索项
-			fieldColumns: [], //表单搜索项
-
-			showFilterPopup: false,
-		})
-
-		const initQueryForm = () => {
-			const form = {}
-			props.columns.forEach((item) => {
-				let value = ""
-				//如果是展开显示的，那么默认值为空字符串
-				//如果展开为多选，那么默认值为 []
-				if (item.expandable === "multiple" || item.type === "cascade") {
-					value = []
-				}
-
-				if (item.defaultValue) {
-					value = isFunction(item.defaultValue) ? item.defaultValue() : item.defaultValue
-				}
-
-				if (item.quick && !find(state.quickColumns, { key: item.key })) {
-					state.quickColumns.push(item)
-				} else {
-					if (item.expandable) {
-						if (!item.options) {
-							console.error(`expandable 为 true 时，必须提供 options 属性`)
-							return
-						}
-					}
-
-					if (!find(state.fieldColumns, { key: item.key })) {
-						state.fieldColumns.push(item)
-					}
-				}
-				form[item.key] = value
-			})
-
-			state.queryForm = form
-		}
-
-		initQueryForm()
-
-		const onUpdateValue = (value) => {
-			emit("update:modelValue", value)
-		}
-
-		const getQueryForm = () => {
-			const form = {}
-			Object.keys(state.queryForm).forEach((key) => {
-				let value = state.queryForm[key]
-
-				if (value && (!isArray(value) || value.length)) {
-					form[key] = value
-				}
-			})
-
-			if (componentValue.value) {
-				form[props.keyword] = componentValue.value
-			}
-
-			return form
-		}
-
-		const onOpenFilter = () => {
-			state.showFilterPopup = true
-		}
-
-		const onCloseFilter = () => {
-			state.showFilterPopup = false
-		}
-
-		const onSearch = () => {
-			const form = getQueryForm()
-			emit("search", form)
-		}
-
-		const onFieldSearch = () => {
-			state.showFilterPopup = false
-			onSearch()
-		}
-
-		const onClearFields = () => {
-			state.fieldColumns.forEach((item) => {
-				state.queryForm[item.key] = ""
-			})
-		}
-
-		/******************* render *********************/
-
-		const quickElems = () => {
-			return state.quickColumns.map((item) => createQuick(item, state.queryForm, onSearch))
-		}
-
-		const popupHeaderElem = () => (
-			<div class={"ex-search-popup__header van-hairline--bottom"}>
-				<h2 class={"ex-search-popup__title"}>{props.title}</h2>
-				<span class={"ex-search-popup__closer"}>
-					<Icon
-						name={"cross"}
-						class={"van-badge__wrapper van-popup__close-icon van-popup__close-icon--top-right van-haptics-feedback"}
-						onClick={() => (state.showFilterPopup = false)}
-					></Icon>
-				</span>
-			</div>
-		)
-
-		const fieldElems = () => (
-			<div class={"ex-search-popup__content"}>
-				{state.fieldColumns.map((item) => (item.expandable ? createExpand(item, state.queryForm) : createField(item, state.queryForm)))}
-			</div>
-		)
-
-		const popupFooterElem = () => (
-			<div class={"ex-search-popup__footer van-hairline--top"}>
-				<ExGrid>
-					{{
-						default: () => [
-							<Button type={"default"} size={"small"} round={true} onClick={onClearFields}>
-								清除
-							</Button>,
-							<Button type={"primary"} size={"small"} round={true} onClick={onFieldSearch}>
-								搜索
-							</Button>,
-						],
-					}}
-				</ExGrid>
-			</div>
-		)
-
-		return () => (
-			<div class="ex-search">
-				<Search
-					v-model={componentValue.value}
-					name={props.keyword}
-					shape={"round"}
-					label={props.label}
-					inputAlign={props.inputAlign}
-					disabled={props.disabled}
-					readonly={props.readonly}
-					placeholder={props.placeholder}
-					onUpdate:modelValue={onUpdateValue}
-					onSearch={onSearch}
-					{...props.searchProps}
-				></Search>
-
-				<div class={"ex-search__quick-bar"}>
-					<div class={"ex-search__quick-container"}>{quickElems()}</div>
-					{state.fieldColumns?.length ? (
-						<div class={"ex-search__filter"} onClick={onOpenFilter}>
-							筛选<Icon name={"filter-o"}></Icon>
-						</div>
-					) : null}
-				</div>
-
-				<Popup
-					v-model:show={state.showFilterPopup}
-					closeable={false}
-					position={"bottom"}
-					round={true}
-					teleport={"body"}
-					closeOnPopstate={true}
-					class={`ex-search-popup`}
-					safeAreaInsetBottom={true}
-					safeAreaInsetTop={true}
-					onClickOverlay={onCloseFilter}
-					onClickCloseIcon={onCloseFilter}
-				>
-					{{ default: () => [popupHeaderElem(), fieldElems(), popupFooterElem()] }}
-				</Popup>
-			</div>
-		)
-	},
-})
+import { defineComponent, reactive, ref } from "vue"
+import { Button, Icon, Popup, Search } from "vant"
+import { find, isArray, isFunction } from "lodash-es"
+import { createExpand, createField, createQuick } from "./components"
+import "./index.less"
+import ExGrid from "../grid/ExGrid.jsx"
+
+/**
+ * ExSearch 搜索组件
+ * @version 1.0.0
+ */
+export default defineComponent({
+	name: "ExSearch",
+	props: {
+		modelValue: { type: String, default: "" },
+
+		/**
+		 * @typedef {Object} ExSearchItemConfig 搜索项
+		 * @property {string} key 搜索项的 key
+		 * @property {string} title 搜索项的标题
+		 * @property {string} type 搜索项的类型
+		 * @property {boolean} [quick] 为 true 展示为快速检索项
+		 * @property {boolean|Object} [expandable] 搜索项是否展开
+		 * @property {Array|Function} [options] 搜索项的选项
+		 * @property {Object} [inputProps] 搜索项的输入框属性
+		 * @property {*} [defaultValue] 搜索项的值
+		 * @property {*} [_temp] 搜索项的临时值[内部使用]
+		 * */
+
+		/**
+		 *
+		 * 搜索项的配置, 详见 [ExSearchItemConfig](#exsearchitemconfig-配置)
+		 *
+		 */
+		columns: { type: Array, default: () => [] },
+
+		/**
+		 * 占位提示文字
+		 */
+		placeholder: { type: String, default: "请输入搜索关键词" },
+
+		/**
+		 * 名称，作为提交表单时的标识符
+		 */
+		keyword: { type: String, default: "keyword" },
+
+		/**
+		 * 搜索框左侧文本
+		 */
+		label: { type: String, default: "" },
+
+		/**
+		 * 是否将输入框设为只读状态，只读状态下无法输入内容
+		 */
+		readonly: { type: Boolean, default: false },
+
+		/**
+		 * 是否禁用输入框
+		 */
+		disabled: { type: Boolean, default: false },
+
+		/**
+		 * 输入框内容对齐方式
+		 * @values left, right, center
+		 */
+		inputAlign: { type: String, default: "left" },
+
+		/**
+		 * [原生配置](https://vant-contrib.gitee.io/vant/#/zh-CN/search)
+		 */
+		searchProps: { type: Object, default: () => ({}) },
+	},
+	emits: ["update:modelValue", "search"],
+	setup(props, { emit }) {
+		const componentValue = ref(props.modelValue)
+
+		const state = reactive({
+			queryForm: {}, // 搜索表单
+			quickColumns: [], //快速检索项
+			fieldColumns: [], //表单搜索项
+
+			showFilterPopup: false,
+		})
+
+		const initQueryForm = () => {
+			const form = {}
+			props.columns.forEach((item) => {
+				let value = ""
+				//如果是展开显示的，那么默认值为空字符串
+				//如果展开为多选，那么默认值为 []
+				if (item.expandable === "multiple" || item.type === "cascade") {
+					value = []
+				}
+
+				if (item.defaultValue) {
+					value = isFunction(item.defaultValue) ? item.defaultValue() : item.defaultValue
+				}
+
+				if (item.quick && !find(state.quickColumns, { key: item.key })) {
+					state.quickColumns.push(item)
+				} else {
+					if (item.expandable) {
+						if (!item.options) {
+							console.error(`expandable 为 true 时，必须提供 options 属性`)
+							return
+						}
+					}
+
+					if (!find(state.fieldColumns, { key: item.key })) {
+						state.fieldColumns.push(item)
+					}
+				}
+				form[item.key] = value
+			})
+
+			state.queryForm = form
+		}
+
+		initQueryForm()
+
+		const onUpdateValue = (value) => {
+			emit("update:modelValue", value)
+		}
+
+		const getQueryForm = () => {
+			const form = {}
+			Object.keys(state.queryForm).forEach((key) => {
+				let value = state.queryForm[key]
+
+				if (value && (!isArray(value) || value.length)) {
+					form[key] = value
+				}
+			})
+
+			if (componentValue.value) {
+				form[props.keyword] = componentValue.value
+			}
+
+			return form
+		}
+
+		const onOpenFilter = () => {
+			state.showFilterPopup = true
+		}
+
+		const onCloseFilter = () => {
+			state.showFilterPopup = false
+		}
+
+		const onSearch = () => {
+			const form = getQueryForm()
+			emit("search", form)
+		}
+
+		const onFieldSearch = () => {
+			state.showFilterPopup = false
+			onSearch()
+		}
+
+		const onClearFields = () => {
+			state.fieldColumns.forEach((item) => {
+				state.queryForm[item.key] = ""
+			})
+		}
+
+		/******************* render *********************/
+
+		const quickElems = () => {
+			return state.quickColumns.map((item) => createQuick(item, state.queryForm, onSearch))
+		}
+
+		const popupHeaderElem = () => (
+			<div class={"ex-search-popup__header van-hairline--bottom"}>
+				<h2 class={"ex-search-popup__title"}>{props.title}</h2>
+				<span class={"ex-search-popup__closer"}>
+					<Icon
+						name={"cross"}
+						class={"van-badge__wrapper van-popup__close-icon van-popup__close-icon--top-right van-haptics-feedback"}
+						onClick={() => (state.showFilterPopup = false)}
+					></Icon>
+				</span>
+			</div>
+		)
+
+		const fieldElems = () => (
+			<div class={"ex-search-popup__content"}>
+				{state.fieldColumns.map((item) => (item.expandable ? createExpand(item, state.queryForm) : createField(item, state.queryForm)))}
+			</div>
+		)
+
+		const popupFooterElem = () => (
+			<div class={"ex-search-popup__footer van-hairline--top"}>
+				<ExGrid>
+					{{
+						default: () => [
+							<Button type={"default"} size={"small"} round={true} onClick={onClearFields}>
+								清除
+							</Button>,
+							<Button type={"primary"} size={"small"} round={true} onClick={onFieldSearch}>
+								搜索
+							</Button>,
+						],
+					}}
+				</ExGrid>
+			</div>
+		)
+
+		return () => (
+			<div class="ex-search">
+				<form action="/">
+					<Search
+						v-model={componentValue.value}
+						name={props.keyword}
+						shape={"round"}
+						label={props.label}
+						inputAlign={props.inputAlign}
+						disabled={props.disabled}
+						readonly={props.readonly}
+						placeholder={props.placeholder}
+						onUpdate:modelValue={onUpdateValue}
+						onSearch={onSearch}
+						{...props.searchProps}
+					></Search>
+				</form>
+
+				<div class={"ex-search__quick-bar"}>
+					<div class={"ex-search__quick-container"}>{quickElems()}</div>
+					{state.fieldColumns?.length ? (
+						<div class={"ex-search__filter"} onClick={onOpenFilter}>
+							筛选<Icon name={"filter-o"}></Icon>
+						</div>
+					) : null}
+				</div>
+
+				<Popup
+					v-model:show={state.showFilterPopup}
+					closeable={false}
+					position={"bottom"}
+					round={true}
+					teleport={"body"}
+					closeOnPopstate={true}
+					class={`ex-search-popup`}
+					safeAreaInsetBottom={true}
+					safeAreaInsetTop={true}
+					onClickOverlay={onCloseFilter}
+					onClickCloseIcon={onCloseFilter}
+				>
+					{{ default: () => [popupHeaderElem(), fieldElems(), popupFooterElem()] }}
+				</Popup>
+			</div>
+		)
+	},
+})