@xilonglab/vue-main 0.7.8

package/packages/form/XlRadio.vue

@@ -0,0 +1,42 @@
+<script setup>
+defineOptions({ name: "XlRadio" })
+
+import { computed } from 'vue';
+
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: "",
+    },
+    options: {
+        type: Array,
+        default() {
+            return [];
+        },
+    },
+})
+
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(data) {
+        emits('change', data)
+        emits('update:modelValue', data)
+    },
+});
+</script>
+
+
+<template>
+    <el-radio-group class="xl-radio" v-model="value">
+        <el-radio v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label
+            }}</el-radio>
+    </el-radio-group>
+</template>
+
+
+<style lang="less"></style>

package/packages/form/XlRawSelect.vue

@@ -0,0 +1,71 @@
+<script setup>
+defineOptions({ name: "XlRawSelect" })
+
+import { ref, computed } from 'vue';
+
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    modelValue: {
+        default: '',
+    },
+    labels: {
+        type: Array,
+        default: () => [],
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    width: {
+        default: 100,
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
+        type: String,
+        default: '',
+    },
+    allowCreate: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+
+const visible = ref(true)
+
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(data) {
+        emits('change', data)
+        emits('update:modelValue', data)
+    },
+});
+</script>
+
+
+<template>
+    <el-select v-if="visible" class="xl-raw-select xl-form-item" v-model="value" :placeholder="placeholder"
+        :disabled="disabled" :style="{ width: `${width}px` }" :multiple="multiple" clearable>
+        <el-option v-for="(label, index) in labels" :key="index" :value="label">
+            {{ label }}
+        </el-option>
+    </el-select>
+</template>
+
+
+<style lang="less" scoped>
+.el-select {
+    margin: 3px 0;
+}
+
+.el-input__inner {
+    padding: 0 5px !important;
+}
+</style>

package/packages/form/XlRegion.vue

@@ -0,0 +1,51 @@
+<script setup>
+defineOptions({ name: "XlRegion" })
+
+import areas from "./data/areas.json";
+import { computed } from 'vue';
+
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    modelValue: {
+        default: "",
+    },
+    placeholder: {
+        type: String,
+        default: "请选择",
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    width: {
+        default: 200,
+    },
+    size: {
+        type: String,
+        default: "",
+    },
+});
+
+const value = computed({
+    get() {
+        return props.modelValue.split('/');
+    },
+    set(val) {
+        const data = val.join('/');
+        emits('change', data)
+        emits('update:modelValue', data)
+    },
+});
+</script>
+
+
+<template>
+    <el-cascader class="xl-region" v-model="value" :options="areas" :disabled="disabled"
+        :style="{ width: width + 'px' }">
+    </el-cascader>
+</template>
+
+
+<style></style>

package/packages/form/XlSearchSelect.vue

@@ -0,0 +1,85 @@
+<script setup>
+defineOptions({ name: "XlSearchSelect" })
+
+import { onMounted, ref, computed, watch, isRef, unref } from 'vue'
+
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    l: {
+        type: String,
+        default: "",
+    },
+    modelValue: {
+        default: '',
+    },
+    options: {
+        type: [Array, Object],
+        default: [],
+    },
+    placeholder: {
+        type: String,
+        default: "",
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    width: {
+        default: 100,
+    },
+})
+
+const showOptions = ref([])
+
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(data) {
+        emits('change', data)
+        emits('update:modelValue', data)
+    },
+});
+
+function handleClick() {
+    showOptions.value = isRef(props.options) ? props.options.value : props.options;
+}
+
+function handleFilter(val) {
+    const options = isRef(props.options) ? props.options.value : props.options;
+    if (val) {
+        showOptions.value = options.filter((item) => {
+            return item.label ? item.label.includes(val) : false;
+        });
+    } else {
+        showOptions.value = options;
+    }
+}
+
+watch(() => isRef(props.options) ? props.options.value : props.options, (val) => {
+    handleClick()
+})
+
+onMounted(() => {
+    handleClick()
+})
+</script>
+
+
+<template>
+    <el-select class="xl-search-select xl-form-item" v-model="value" :placeholder="l?l:placeholder" filterable
+        :filter-method="handleFilter" @click="handleClick" :style="{ width: `${width}px` }" :disabled="disabled"
+        :multiple="multiple" clearable>
+        <el-option v-for="(option, index) in showOptions" :key="index" :label="option.label" :value="option.value">
+        </el-option>
+    </el-select>
+</template>
+
+
+<style></style>

package/packages/form/XlSelect.vue

@@ -0,0 +1,77 @@
+<script setup>
+defineOptions({ name: "XlSelect" })
+
+import { ref, computed, isRef, unref } from 'vue';
+
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    l: {
+        type: String,
+        default: "",
+    },
+    modelValue: {
+        default: '',
+    },
+    options: {
+        type: [Array, Object], // Allow both Array and Ref<Array>
+        default: () => [],
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    width: {
+        default: 100,
+    },
+    multiple: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
+        type: String,
+        default: '',
+    },
+    allowCreate: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+
+const visible = ref(true)
+
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(data) {
+        emits('change', data)
+        emits('update:modelValue', data)
+    },
+});
+
+const resolvedOptions = computed(() => {
+    return props.options.value ? props.options.value : props.options;
+});
+</script>
+
+
+<template>
+    <el-select v-if="visible" class="xl-select xl-form-item" v-model="value" :placeholder="l?l:placeholder"
+        :disabled="disabled" :style="{ width: `${width}px` }" :multiple="multiple" clearable>
+        <el-option v-for="option in resolvedOptions" :key="option.value" :label="option.label" :value="option.value"/>
+    </el-select>
+</template>
+
+
+<style lang="less" scoped>
+.el-select {
+    margin: 3px 0;
+}
+
+.el-input__inner {
+    padding: 0 5px !important;
+}
+</style>

package/packages/form/XlSwitch.vue

@@ -0,0 +1,33 @@
+<script setup>
+defineOptions({ name: "XlSwitch" })
+
+import { computed } from 'vue';
+
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    modelValue: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(data) {
+        emits('change', data)
+        emits('update:modelValue', data)
+    },
+});
+</script>
+
+
+<template>
+    <el-switch class="xl-switch" v-model="value" :active-value="1" :inactive-value="0" />
+</template>
+
+
+<style lang="less" scoped></style>

package/packages/form/XlTabRadio.vue

@@ -0,0 +1,43 @@
+<script setup>
+defineOptions({ name: "XlTabRadio" })
+
+import { computed } from 'vue';
+
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    modelValue: {
+        default: "",
+    },
+    options: {
+        type: Array,
+        default() {
+            return [];
+        },
+    },
+})
+
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(data) {
+        emits('change', data)
+        emits('update:modelValue', data)
+    },
+});
+</script>
+
+
+<template>
+    <el-radio-group class="xl-tab-radio" v-model="value">
+        <el-radio-button v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label
+            }}</el-radio-button>
+    </el-radio-group>
+</template>
+
+
+<style lang="less">
+.xl-tab-radio {}
+</style>

package/packages/form/XlTags.vue

@@ -0,0 +1,105 @@
+<script setup>
+defineOptions({ name: "XlTags" })   
+
+import { ref, computed } from 'vue'
+
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: ''
+    },
+    editable: {
+        type: Boolean,
+        default: false
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    type: {
+        type: String,
+        default: 'input'
+    }
+})
+
+const tags = computed({
+    get() {
+        if (typeof props.modelValue == 'string') {
+            if (props.modelValue.length !== 0) {
+                return props.modelValue.split(',');
+            }
+        }
+        return []
+    },
+    set(data) {
+        emits('change', data.join(','))
+        emits('update:modelValue', data.join(','))
+    },
+});
+
+const valueMap = computed(() => {
+    let tmp = {};
+    props.options.forEach((option) => {
+        tmp[option.value] = option.label;
+    });
+    return tmp;
+})
+
+const newTag = ref('')
+
+const handlers = {
+    add() {
+        const temp = tags.value.slice()
+        temp.push(newTag.value);
+        tags.value = temp
+        newTag.value = ''
+    },
+    remove(index) {
+        tags.value.splice(index, 1)
+        const temp = tags.value.slice()
+        temp.splice(index, 1);
+        tags.value = temp
+    }
+}
+</script>
+      
+    
+<template>
+    <div class="xl-tags">
+        <el-tag v-for="(tag, index) in tags" :key="tag" :closable="editable" @close="handlers.remove(index)">
+            {{ type == 'select' ? valueMap[tag] : tag }}
+        </el-tag>
+        <xl-input v-if="editable && type == 'input'" class="new-tag" v-model="newTag" />
+        <xl-search-select v-if="editable && type == 'select'" class="new-tag" v-model="newTag"
+            :options="options"/>
+        <xl-button v-if="editable" class="add-btn" @click="handlers.add">+ 添加</xl-button>
+    </div>
+</template>
+      
+      
+<style lang="less" scoped>
+.el-tag {
+    margin-left: 3px;
+    margin-bottom: 2px;
+}
+
+.xl-input{
+    width:auto!important
+}
+
+.new-tag {
+    margin-left: 3px;
+    margin-bottom: 2px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.add-btn {
+    margin-left: 3px;
+}
+</style>

package/packages/form/XlTextarea.vue

@@ -0,0 +1,48 @@
+<script setup>
+defineOptions({ name: "XlTextarea" })
+
+import { computed } from 'vue';
+
+
+const emits = defineEmits(["update:modelValue", 'change']);
+
+const props = defineProps({
+    modelValue: {
+    },
+    placeholder: {
+        type: String,
+        default: "",
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    width: {
+        default: 100,
+    },
+});
+
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(data) {
+        emits('change', data)
+        emits("update:modelValue", data)
+    },
+});
+</script>
+
+
+<template>
+    <el-input class="xl-textarea xl-form-item" v-model="value" :placeholder="placeholder" type="textarea" size="small"
+        :disabled="disabled" :autosize="{ minRows: 2 }"></el-input>
+</template>
+
+
+<style lang="less" scoped>
+textarea {
+    width: 100%;
+    height: 100%;
+}
+</style>

package/packages/form/XlTime.vue

@@ -0,0 +1,50 @@
+<script setup>
+defineOptions({ name: "XlTime" })
+
+import { computed } from 'vue';
+
+
+const emits = defineEmits(['change', 'update:modelValue'])
+
+const props = defineProps({
+    modelValue: {
+        default: "",
+    },
+    placeholder: {
+        type: String,
+        default: "选择时间",
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    width: {
+        default: 100,
+    },
+});
+
+const value = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(data) {
+        emits('change', data)
+        emits('update:modelValue', data)
+    },
+});
+</script>
+
+
+<template>
+    <el-date-picker class="xl-time xl-form-item" v-model="value" type="datetime" :placeholder="placeholder"
+        :style="{ width: `${width}px` }" :disabled="disabled" clearable value-format="YYYY-MM-DD HH:mm:ss" />
+</template>
+
+
+<style lang="less">
+.z-time {
+    .el-input__prefix {
+        display: none !important;
+    }
+}
+</style>