@ditari/bsui 5.0.16 → 5.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/select/Select.vue2.cjs +7 -0
- package/dist/cjs/components/select/Select.vue2.cjs.map +1 -1
- package/dist/esm/components/select/Select.vue2.mjs +8 -1
- package/dist/esm/components/select/Select.vue2.mjs.map +1 -1
- package/dist/types/components/select/Select.vue.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -45,6 +45,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
45
45
|
const { modelValue, data, onSelect, onChange } = useSelect();
|
|
46
46
|
function useSelect() {
|
|
47
47
|
const route = vueRouter.useRoute();
|
|
48
|
+
const loadingStatus = vue.ref(false);
|
|
48
49
|
const isKeepAlive = keepNames.some(
|
|
49
50
|
(name) => name === route.name
|
|
50
51
|
);
|
|
@@ -73,9 +74,15 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
73
74
|
modelValue2.value = val;
|
|
74
75
|
}
|
|
75
76
|
);
|
|
77
|
+
setTimeout(() => {
|
|
78
|
+
if (!loadingStatus.value) {
|
|
79
|
+
loadDicData();
|
|
80
|
+
}
|
|
81
|
+
}, 1e3);
|
|
76
82
|
function loadDicData() {
|
|
77
83
|
return __async(this, null, function* () {
|
|
78
84
|
try {
|
|
85
|
+
loadingStatus.value = true;
|
|
79
86
|
yield fetchDic(props.name);
|
|
80
87
|
dicData = [...getDicByKey(props.name)];
|
|
81
88
|
data2.value = dicData;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.vue2.cjs","sources":["../../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n inject,\n onActivated,\n onMounted,\n ref,\n watch\n} from \"vue\";\nimport { useRoute } from \"vue-router\";\n\nimport {\n useDicStore,\n useKeepAliveStore\n} from \"@ditari/store\";\n\ninterface DicItem {\n value: string | number;\n label: string;\n}\n\nconst props = defineProps({\n value: { required: true, default: undefined },\n name: { type: String, required: true, default: \"\" },\n disabled: { type: Boolean, required: false, default: false },\n placeholder: { type: String, required: false, default: \"请填写默认占位符啊！\" },\n include: { type: Array, required: false, default: () => [] }\n});\n\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDicStore();\nconst { get: keepNames } = useKeepAliveStore();\n\nconst { modelValue, data, onSelect, onChange } =\n useSelect();\n\nfunction useSelect() {\n const route = useRoute();\n // 判断使用组件的页面是否被缓存\n const isKeepAlive = keepNames.some(\n (name: string) => name === route.name\n );\n // 注入 fetchDic，提供默认值\n const fetchDic = inject<\n (name: string) => Promise<unknown[]>\n >(\"fetchDic\", async (name: string) => {\n console.warn(\n `fetchDic 未注入，使用默认实现，name: ${name}`\n );\n return [];\n });\n\n // 字典数据\n let dicData: DicItem[] = [...getDicByKey(props.name)];\n const data = ref<DicItem[]>(dicData);\n\n // 取值\n const modelValue = ref<string | number | undefined>(\n props.value\n );\n\n onActivated(() => {\n // 缓存页面被激活的时候调用\n loadDicData();\n });\n\n onMounted(() => {\n if (!isKeepAlive) {\n // 未缓存页面 挂载的时候调用\n loadDicData();\n }\n });\n\n // 监听value值的变化\n watch(\n () => props.value,\n val => {\n modelValue.value = val;\n }\n );\n\n // 请求字典数据的函数\n async function loadDicData() {\n try {\n // 调用注入进来的fetchDic方法\n await fetchDic(props.name);\n dicData = [...getDicByKey(props.name)];\n data.value = dicData;\n } catch (error) {\n console.error(\"获取字典数据失败:\", error);\n }\n }\n\n // 监听用户搜索事件\n const onSearch = (keywords: string) => {\n sendWorkerSearch(keywords);\n };\n\n // 发送搜索到webworker\n function sendWorkerSearch(keywords: string) {\n keywords = keywords ?? \"\";\n data.value = dicData\n .filter((item: DicItem) => {\n return (\n item.value\n .toString()\n .toLowerCase()\n .indexOf(keywords.toLowerCase()) !== -1 ||\n item.label\n .toLowerCase()\n .includes(keywords.toLowerCase())\n );\n })\n .slice(0, 10);\n if (data.value.length === 0) {\n data.value = [...dicData].slice(0, 10);\n }\n }\n\n // 监听下拉选择事件\n const onSelect = (value: string | number) => {\n // 发射选择的数据\n emits(\"update:value\", value);\n // 处理下拉后返回数据的\n onSelectHandler();\n };\n\n // 监听数据改变\n const onChange = () => {\n emits(\"update:value\", modelValue.value);\n emits(\"change\", modelValue.value);\n };\n\n /**\n * 根据当前选中的value匹配对应的整条数据\n * 然后返回给父组件\n */\n function onSelectHandler() {\n const dicList = getDicByKey(props.name);\n const rs = dicList.find(\n (obj: DicItem) => obj.value === modelValue.value\n );\n emits(\"select\", rs);\n }\n\n watch(\n () => props.include,\n (val: Array<string | number>) => {\n if (val.length > 0) {\n // 只过滤出来include包含的数据\n data.value = dicData.filter((item: DicItem) => {\n return val.some(\n (i: string | number) => i === item.value\n );\n });\n } else {\n data.value = dicData;\n }\n },\n {\n immediate: true\n }\n );\n\n return {\n data,\n modelValue,\n onSearch,\n onSelect,\n onChange\n };\n}\n\n/**\n * 过滤筛选\n * @param inputValue\n * @param options\n */\nconst onFilterOption = (\n inputValue: string,\n options: DicItem\n) => {\n return (\n options.value\n .toString()\n .toLowerCase()\n .indexOf(inputValue.toLowerCase()) !== -1 ||\n options.label\n .toLowerCase()\n .includes(inputValue.toLowerCase())\n );\n};\n</script>\n\n<template>\n <a-select\n v-model:value=\"modelValue\"\n style=\"width: 100%\"\n allow-clear\n show-search\n :options=\"data\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :filter-option=\"onFilterOption\"\n @select=\"onSelect\"\n @change=\"onChange\"\n >\n </a-select>\n</template>\n\n<style scoped></style>\n"],"names":["useDicStore","useKeepAliveStore","useRoute","
|
|
1
|
+
{"version":3,"file":"Select.vue2.cjs","sources":["../../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n inject,\n onActivated,\n onMounted,\n ref,\n watch\n} from \"vue\";\nimport { useRoute } from \"vue-router\";\n\nimport {\n useDicStore,\n useKeepAliveStore\n} from \"@ditari/store\";\n\ninterface DicItem {\n value: string | number;\n label: string;\n}\n\nconst props = defineProps({\n value: { required: true, default: undefined },\n name: { type: String, required: true, default: \"\" },\n disabled: { type: Boolean, required: false, default: false },\n placeholder: { type: String, required: false, default: \"请填写默认占位符啊！\" },\n include: { type: Array, required: false, default: () => [] }\n});\n\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDicStore();\nconst { get: keepNames } = useKeepAliveStore();\n\nconst { modelValue, data, onSelect, onChange } =\n useSelect();\n\nfunction useSelect() {\n const route = useRoute();\n const loadingStatus = ref(false);\n // 判断使用组件的页面是否被缓存\n const isKeepAlive = keepNames.some(\n (name: string) => name === route.name\n );\n // 注入 fetchDic，提供默认值\n const fetchDic = inject<\n (name: string) => Promise<unknown[]>\n >(\"fetchDic\", async (name: string) => {\n console.warn(\n `fetchDic 未注入，使用默认实现，name: ${name}`\n );\n return [];\n });\n\n // 字典数据\n let dicData: DicItem[] = [...getDicByKey(props.name)];\n const data = ref<DicItem[]>(dicData);\n\n // 取值\n const modelValue = ref<string | number | undefined>(\n props.value\n );\n\n onActivated(() => {\n // 缓存页面被激活的时候调用\n loadDicData();\n });\n\n onMounted(() => {\n if (!isKeepAlive) {\n // 未缓存页面 挂载的时候调用\n loadDicData();\n }\n });\n\n // 监听value值的变化\n watch(\n () => props.value,\n val => {\n modelValue.value = val;\n }\n );\n\n setTimeout(() => {\n if (!loadingStatus.value) {\n loadDicData();\n }\n }, 1000);\n\n // 请求字典数据的函数\n async function loadDicData() {\n try {\n loadingStatus.value = true;\n // 调用注入进来的fetchDic方法\n await fetchDic(props.name);\n dicData = [...getDicByKey(props.name)];\n data.value = dicData;\n } catch (error) {\n console.error(\"获取字典数据失败:\", error);\n }\n }\n\n // 监听用户搜索事件\n const onSearch = (keywords: string) => {\n sendWorkerSearch(keywords);\n };\n\n // 发送搜索到webworker\n function sendWorkerSearch(keywords: string) {\n keywords = keywords ?? \"\";\n data.value = dicData\n .filter((item: DicItem) => {\n return (\n item.value\n .toString()\n .toLowerCase()\n .indexOf(keywords.toLowerCase()) !== -1 ||\n item.label\n .toLowerCase()\n .includes(keywords.toLowerCase())\n );\n })\n .slice(0, 10);\n if (data.value.length === 0) {\n data.value = [...dicData].slice(0, 10);\n }\n }\n\n // 监听下拉选择事件\n const onSelect = (value: string | number) => {\n // 发射选择的数据\n emits(\"update:value\", value);\n // 处理下拉后返回数据的\n onSelectHandler();\n };\n\n // 监听数据改变\n const onChange = () => {\n emits(\"update:value\", modelValue.value);\n emits(\"change\", modelValue.value);\n };\n\n /**\n * 根据当前选中的value匹配对应的整条数据\n * 然后返回给父组件\n */\n function onSelectHandler() {\n const dicList = getDicByKey(props.name);\n const rs = dicList.find(\n (obj: DicItem) => obj.value === modelValue.value\n );\n emits(\"select\", rs);\n }\n\n watch(\n () => props.include,\n (val: Array<string | number>) => {\n if (val.length > 0) {\n // 只过滤出来include包含的数据\n data.value = dicData.filter((item: DicItem) => {\n return val.some(\n (i: string | number) => i === item.value\n );\n });\n } else {\n data.value = dicData;\n }\n },\n {\n immediate: true\n }\n );\n\n return {\n data,\n modelValue,\n onSearch,\n onSelect,\n onChange\n };\n}\n\n/**\n * 过滤筛选\n * @param inputValue\n * @param options\n */\nconst onFilterOption = (\n inputValue: string,\n options: DicItem\n) => {\n return (\n options.value\n .toString()\n .toLowerCase()\n .indexOf(inputValue.toLowerCase()) !== -1 ||\n options.label\n .toLowerCase()\n .includes(inputValue.toLowerCase())\n );\n};\n</script>\n\n<template>\n <a-select\n v-model:value=\"modelValue\"\n style=\"width: 100%\"\n allow-clear\n show-search\n :options=\"data\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :filter-option=\"onFilterOption\"\n @select=\"onSelect\"\n @change=\"onChange\"\n >\n </a-select>\n</template>\n\n<style scoped></style>\n"],"names":["useDicStore","useKeepAliveStore","useRoute","ref","inject","data","modelValue","onActivated","onMounted","watch","onSelect","onChange"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent,
|
|
1
|
+
import { defineComponent, ref, inject, onActivated, onMounted, watch, resolveComponent, createBlock, openBlock, unref, isRef } from 'vue';
|
|
2
2
|
import { useRoute } from 'vue-router';
|
|
3
3
|
import { useDicStore, useKeepAliveStore } from '@ditari/store';
|
|
4
4
|
|
|
@@ -41,6 +41,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
41
41
|
const { modelValue, data, onSelect, onChange } = useSelect();
|
|
42
42
|
function useSelect() {
|
|
43
43
|
const route = useRoute();
|
|
44
|
+
const loadingStatus = ref(false);
|
|
44
45
|
const isKeepAlive = keepNames.some(
|
|
45
46
|
(name) => name === route.name
|
|
46
47
|
);
|
|
@@ -69,9 +70,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
69
70
|
modelValue2.value = val;
|
|
70
71
|
}
|
|
71
72
|
);
|
|
73
|
+
setTimeout(() => {
|
|
74
|
+
if (!loadingStatus.value) {
|
|
75
|
+
loadDicData();
|
|
76
|
+
}
|
|
77
|
+
}, 1e3);
|
|
72
78
|
function loadDicData() {
|
|
73
79
|
return __async(this, null, function* () {
|
|
74
80
|
try {
|
|
81
|
+
loadingStatus.value = true;
|
|
75
82
|
yield fetchDic(props.name);
|
|
76
83
|
dicData = [...getDicByKey(props.name)];
|
|
77
84
|
data2.value = dicData;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.vue2.mjs","sources":["../../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n inject,\n onActivated,\n onMounted,\n ref,\n watch\n} from \"vue\";\nimport { useRoute } from \"vue-router\";\n\nimport {\n useDicStore,\n useKeepAliveStore\n} from \"@ditari/store\";\n\ninterface DicItem {\n value: string | number;\n label: string;\n}\n\nconst props = defineProps({\n value: { required: true, default: undefined },\n name: { type: String, required: true, default: \"\" },\n disabled: { type: Boolean, required: false, default: false },\n placeholder: { type: String, required: false, default: \"请填写默认占位符啊！\" },\n include: { type: Array, required: false, default: () => [] }\n});\n\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDicStore();\nconst { get: keepNames } = useKeepAliveStore();\n\nconst { modelValue, data, onSelect, onChange } =\n useSelect();\n\nfunction useSelect() {\n const route = useRoute();\n // 判断使用组件的页面是否被缓存\n const isKeepAlive = keepNames.some(\n (name: string) => name === route.name\n );\n // 注入 fetchDic，提供默认值\n const fetchDic = inject<\n (name: string) => Promise<unknown[]>\n >(\"fetchDic\", async (name: string) => {\n console.warn(\n `fetchDic 未注入，使用默认实现，name: ${name}`\n );\n return [];\n });\n\n // 字典数据\n let dicData: DicItem[] = [...getDicByKey(props.name)];\n const data = ref<DicItem[]>(dicData);\n\n // 取值\n const modelValue = ref<string | number | undefined>(\n props.value\n );\n\n onActivated(() => {\n // 缓存页面被激活的时候调用\n loadDicData();\n });\n\n onMounted(() => {\n if (!isKeepAlive) {\n // 未缓存页面 挂载的时候调用\n loadDicData();\n }\n });\n\n // 监听value值的变化\n watch(\n () => props.value,\n val => {\n modelValue.value = val;\n }\n );\n\n // 请求字典数据的函数\n async function loadDicData() {\n try {\n // 调用注入进来的fetchDic方法\n await fetchDic(props.name);\n dicData = [...getDicByKey(props.name)];\n data.value = dicData;\n } catch (error) {\n console.error(\"获取字典数据失败:\", error);\n }\n }\n\n // 监听用户搜索事件\n const onSearch = (keywords: string) => {\n sendWorkerSearch(keywords);\n };\n\n // 发送搜索到webworker\n function sendWorkerSearch(keywords: string) {\n keywords = keywords ?? \"\";\n data.value = dicData\n .filter((item: DicItem) => {\n return (\n item.value\n .toString()\n .toLowerCase()\n .indexOf(keywords.toLowerCase()) !== -1 ||\n item.label\n .toLowerCase()\n .includes(keywords.toLowerCase())\n );\n })\n .slice(0, 10);\n if (data.value.length === 0) {\n data.value = [...dicData].slice(0, 10);\n }\n }\n\n // 监听下拉选择事件\n const onSelect = (value: string | number) => {\n // 发射选择的数据\n emits(\"update:value\", value);\n // 处理下拉后返回数据的\n onSelectHandler();\n };\n\n // 监听数据改变\n const onChange = () => {\n emits(\"update:value\", modelValue.value);\n emits(\"change\", modelValue.value);\n };\n\n /**\n * 根据当前选中的value匹配对应的整条数据\n * 然后返回给父组件\n */\n function onSelectHandler() {\n const dicList = getDicByKey(props.name);\n const rs = dicList.find(\n (obj: DicItem) => obj.value === modelValue.value\n );\n emits(\"select\", rs);\n }\n\n watch(\n () => props.include,\n (val: Array<string | number>) => {\n if (val.length > 0) {\n // 只过滤出来include包含的数据\n data.value = dicData.filter((item: DicItem) => {\n return val.some(\n (i: string | number) => i === item.value\n );\n });\n } else {\n data.value = dicData;\n }\n },\n {\n immediate: true\n }\n );\n\n return {\n data,\n modelValue,\n onSearch,\n onSelect,\n onChange\n };\n}\n\n/**\n * 过滤筛选\n * @param inputValue\n * @param options\n */\nconst onFilterOption = (\n inputValue: string,\n options: DicItem\n) => {\n return (\n options.value\n .toString()\n .toLowerCase()\n .indexOf(inputValue.toLowerCase()) !== -1 ||\n options.label\n .toLowerCase()\n .includes(inputValue.toLowerCase())\n );\n};\n</script>\n\n<template>\n <a-select\n v-model:value=\"modelValue\"\n style=\"width: 100%\"\n allow-clear\n show-search\n :options=\"data\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :filter-option=\"onFilterOption\"\n @select=\"onSelect\"\n @change=\"onChange\"\n >\n </a-select>\n</template>\n\n<style scoped></style>\n"],"names":["data","modelValue","onSelect","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAQd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,EAAE,WAAY,EAAA,GAAI,WAAY,EAAA;AACpC,IAAA,MAAM,EAAE,GAAA,EAAK,SAAU,EAAA,GAAI,iBAAkB,EAAA;AAE7C,IAAA,MAAM,EAAE,UAAY,EAAA,IAAA,EAAM,QAAU,EAAA,QAAA,KAClC,SAAU,EAAA;AAEZ,IAAA,SAAS,SAAY,GAAA;AACnB,MAAA,MAAM,QAAQ,QAAS,EAAA;
|
|
1
|
+
{"version":3,"file":"Select.vue2.mjs","sources":["../../../../src/components/select/Select.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n inject,\n onActivated,\n onMounted,\n ref,\n watch\n} from \"vue\";\nimport { useRoute } from \"vue-router\";\n\nimport {\n useDicStore,\n useKeepAliveStore\n} from \"@ditari/store\";\n\ninterface DicItem {\n value: string | number;\n label: string;\n}\n\nconst props = defineProps({\n value: { required: true, default: undefined },\n name: { type: String, required: true, default: \"\" },\n disabled: { type: Boolean, required: false, default: false },\n placeholder: { type: String, required: false, default: \"请填写默认占位符啊！\" },\n include: { type: Array, required: false, default: () => [] }\n});\n\nconst emits = defineEmits([\"update:value\", \"change\", \"select\"]);\n\nconst { getDicByKey } = useDicStore();\nconst { get: keepNames } = useKeepAliveStore();\n\nconst { modelValue, data, onSelect, onChange } =\n useSelect();\n\nfunction useSelect() {\n const route = useRoute();\n const loadingStatus = ref(false);\n // 判断使用组件的页面是否被缓存\n const isKeepAlive = keepNames.some(\n (name: string) => name === route.name\n );\n // 注入 fetchDic，提供默认值\n const fetchDic = inject<\n (name: string) => Promise<unknown[]>\n >(\"fetchDic\", async (name: string) => {\n console.warn(\n `fetchDic 未注入，使用默认实现，name: ${name}`\n );\n return [];\n });\n\n // 字典数据\n let dicData: DicItem[] = [...getDicByKey(props.name)];\n const data = ref<DicItem[]>(dicData);\n\n // 取值\n const modelValue = ref<string | number | undefined>(\n props.value\n );\n\n onActivated(() => {\n // 缓存页面被激活的时候调用\n loadDicData();\n });\n\n onMounted(() => {\n if (!isKeepAlive) {\n // 未缓存页面 挂载的时候调用\n loadDicData();\n }\n });\n\n // 监听value值的变化\n watch(\n () => props.value,\n val => {\n modelValue.value = val;\n }\n );\n\n setTimeout(() => {\n if (!loadingStatus.value) {\n loadDicData();\n }\n }, 1000);\n\n // 请求字典数据的函数\n async function loadDicData() {\n try {\n loadingStatus.value = true;\n // 调用注入进来的fetchDic方法\n await fetchDic(props.name);\n dicData = [...getDicByKey(props.name)];\n data.value = dicData;\n } catch (error) {\n console.error(\"获取字典数据失败:\", error);\n }\n }\n\n // 监听用户搜索事件\n const onSearch = (keywords: string) => {\n sendWorkerSearch(keywords);\n };\n\n // 发送搜索到webworker\n function sendWorkerSearch(keywords: string) {\n keywords = keywords ?? \"\";\n data.value = dicData\n .filter((item: DicItem) => {\n return (\n item.value\n .toString()\n .toLowerCase()\n .indexOf(keywords.toLowerCase()) !== -1 ||\n item.label\n .toLowerCase()\n .includes(keywords.toLowerCase())\n );\n })\n .slice(0, 10);\n if (data.value.length === 0) {\n data.value = [...dicData].slice(0, 10);\n }\n }\n\n // 监听下拉选择事件\n const onSelect = (value: string | number) => {\n // 发射选择的数据\n emits(\"update:value\", value);\n // 处理下拉后返回数据的\n onSelectHandler();\n };\n\n // 监听数据改变\n const onChange = () => {\n emits(\"update:value\", modelValue.value);\n emits(\"change\", modelValue.value);\n };\n\n /**\n * 根据当前选中的value匹配对应的整条数据\n * 然后返回给父组件\n */\n function onSelectHandler() {\n const dicList = getDicByKey(props.name);\n const rs = dicList.find(\n (obj: DicItem) => obj.value === modelValue.value\n );\n emits(\"select\", rs);\n }\n\n watch(\n () => props.include,\n (val: Array<string | number>) => {\n if (val.length > 0) {\n // 只过滤出来include包含的数据\n data.value = dicData.filter((item: DicItem) => {\n return val.some(\n (i: string | number) => i === item.value\n );\n });\n } else {\n data.value = dicData;\n }\n },\n {\n immediate: true\n }\n );\n\n return {\n data,\n modelValue,\n onSearch,\n onSelect,\n onChange\n };\n}\n\n/**\n * 过滤筛选\n * @param inputValue\n * @param options\n */\nconst onFilterOption = (\n inputValue: string,\n options: DicItem\n) => {\n return (\n options.value\n .toString()\n .toLowerCase()\n .indexOf(inputValue.toLowerCase()) !== -1 ||\n options.label\n .toLowerCase()\n .includes(inputValue.toLowerCase())\n );\n};\n</script>\n\n<template>\n <a-select\n v-model:value=\"modelValue\"\n style=\"width: 100%\"\n allow-clear\n show-search\n :options=\"data\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :filter-option=\"onFilterOption\"\n @select=\"onSelect\"\n @change=\"onChange\"\n >\n </a-select>\n</template>\n\n<style scoped></style>\n"],"names":["data","modelValue","onSelect","onChange"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/select/Select.vue.ts"],"names":[],"mappings":"AAeA,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAFQ,MAAM,GAAG,MAAM;eACf,MAAM;;eADN,MAAM,GAAG,MAAM;eACf,MAAM;;
|
|
1
|
+
{"version":3,"file":"Select.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/select/Select.vue.ts"],"names":[],"mappings":"AAeA,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAFQ,MAAM,GAAG,MAAM;eACf,MAAM;;eADN,MAAM,GAAG,MAAM;eACf,MAAM;;sBAsHY,MAAM,GAAG,MAAM;;;;mBAvHjC,MAAM,GAAG,MAAM;mBACf,MAAM;;mBADN,MAAM,GAAG,MAAM;mBACf,MAAM;;;6BA4Fe,MAAM;0BA0BT,MAAM,GAAG,MAAM;;;iCA2D5B,MAAM,WACT,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA9KlB,wBAgME"}
|