@wp1001/ui 2.9.13

package/packages/components/xcheckboxs/pc.vue

@@ -0,0 +1,42 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <el-checkbox-group
+    class="x-checkboxs pc-x-checkboxs"
+    :class="plain ? 'pc-x-checkboxs--plain' : ''"
+    v-bind="attrs"
+    :modelValue
+    @update:modelValue="value => $emit('update:modelValue', value)"
+    @change="$emit('change', $event)"
+  >
+    <el-checkbox
+      v-for="option in _options"
+      v-bind="attrs"
+      :disabled="option.raw?.disabled"
+      :key="option.text"
+      :value="option.value"
+    >
+      <slot
+        v-if="$slots.custom"
+        name="custom"
+        :option
+        :raw="option.raw"
+      />
+      <span v-else>{{ option.text }}</span>
+    </el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<style lang="scss" scoped>
+.pc-x-checkboxs--plain {
+  :deep(.el-checkbox) {
+    margin-right: 20px;
+    font-weight: normal;
+    .el-checkbox__input {
+      display: none;
+    }
+  }
+}
+</style>

package/packages/components/xcol/mobile.js

@@ -0,0 +1,10 @@
+export default {
+  name: 'MobileXCol',
+  inheritAttrs: false,
+  computed: {
+    attrs () {
+      const { text, slot, ...others } = this.$attrs
+      return others
+    }
+  }
+}

package/packages/components/xcol/mobile.vue

@@ -0,0 +1,9 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <van-col v-bind="attrs" class="x-col mobile-x-col">
+    <slot />
+  </van-col>
+</template>

package/packages/components/xcol/pc.js

@@ -0,0 +1,10 @@
+export default {
+  name: 'PcXCol',
+  inheritAttrs: false,
+  computed: {
+    attrs () {
+      const { text, slot, ...others } = this.$attrs
+      return others
+    }
+  }
+}

package/packages/components/xcol/pc.vue

@@ -0,0 +1,9 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <el-col v-bind="attrs" class="x-col pc-x-col">
+    <slot />
+  </el-col>
+</template>

package/packages/components/xdatepicker/mobile.js

@@ -0,0 +1,71 @@
+import { injectVanFieldProvide } from '../../utils/funcs.js'
+
+const { $Date, format } = StardustJs.dates
+
+export default {
+  name: 'MobileXDatePicker',
+  props: {
+    modelValue: String | Date,
+    valueFormat: String,
+    type: {
+      type: String,
+      default: 'date'
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  computed: {
+    value () {
+      if (!this.modelValue) return ''
+      let format = 'YYYY-MM-DD'
+      if (this.type === 'datetime') {
+        format = 'YYYY-MM-DD HH:mm'
+      } else if (this.type === 'time') {
+        format = 'HH:mm'
+      }
+      return new $Date(this.modelValue).to(format)
+    },
+    tabs () {
+      if (this.type === 'datetime') return ['选择日期', '选择时间']
+      else if (this.type === 'time') return ['选择时间']
+      return ['选择日期']
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      date: [],
+      time: []
+    }
+  },
+  watch: {
+    modelValue: {
+      immediate: true,
+      handler (value) {
+        const d = new $Date(value)
+        this.date = d.to('YYYY-MM-DD').split('-')
+        this.time = d.to('HH:mm').split(':')
+      }
+    }
+  },
+  created () {
+    injectVanFieldProvide(this)
+  },
+  methods: {
+    onConfirm (params) {
+      let [date, time] = params
+      if (this.type === 'date') {
+        time = {}
+      } else if (this.type === 'time') {
+        time = date
+        date = {}
+      }
+      const [year = '1970', month = '01', day = '01'] = date?.selectedValues || []
+      const [hour = '00', minute = '00'] = time?.selectedValues || []
+      const value = new $Date(`${year}/${month}/${day} ${hour}:${minute}:00`).to(this.valueFormat || '')
+      this.$emit('update:modelValue', value)
+      this.$emit('change', value)
+      this.provide?.resetValidation()
+      this.visible = false
+    }
+  }
+}

package/packages/components/xdatepicker/mobile.vue

@@ -0,0 +1,44 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <div class="x-date-picker mobile-x-date-picker">
+    <input
+      v-model="value"
+      readonly
+      class="van-field__control"
+      :placeholder="$attrs.placeholder ?? '请选择日期'"
+      @click="visible = true"
+    />
+    <mobile-x-dialog v-model="visible" title class="x-date-picker__dialog">
+      <van-picker-group
+        :title="$attrs.title"
+        :tabs
+        @confirm="onConfirm"
+        @cancel="visible = false"
+      >
+        <van-date-picker
+          v-model="date"
+          v-bind="$attrs"
+          v-if="type === 'datetime' || type === 'date'"
+        />
+        <van-time-picker
+          v-model="time"
+          v-bind="$attrs"
+          v-if="type === 'datetime' || type === 'time'"
+        />
+      </van-picker-group>
+    </mobile-x-dialog>
+  </div>
+</template>
+
+<style lang="scss">
+.x-date-picker {
+  &__dialog {
+    .van-action-sheet__content {
+      padding: 0 !important;
+    }
+  }
+}
+</style>

package/packages/components/xdatepicker/pc.js

@@ -0,0 +1,9 @@
+export default {
+  name: 'PcXDatePicker',
+  emits: ['update:modelValue'],
+  methods: {
+    onChange (value) {
+      this.$emit('update:modelValue', value)
+    }
+  }
+}

package/packages/components/xdatepicker/pc.vue

@@ -0,0 +1,12 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <el-date-picker
+    v-bind="$attrs"
+    class="x-date-picker pc-x-date-picker"
+    placeholder="请选择日期时间"
+    @update:modelValue="onChange"
+  />
+</template>

package/packages/components/xdialog/mobile.js

@@ -0,0 +1,60 @@
+export default {
+  name: 'MobileXDialog',
+  props: {
+    actionsheet: {
+      type: Boolean,
+      default: true
+    },
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '详情'
+    },
+    submitText: {
+      type: String,
+      default: '提交'
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+  },
+  emits: [
+    'update:modelValue',
+    'submit',
+    'cancel'
+  ],
+  computed: {
+    visible: {
+      get () {
+        return this.modelValue
+      },
+      set (value) {
+        this.$emit('update:modelValue', value)
+      }
+    },
+    canCancel () {
+      return !!this.$attrs.onCancel || !!this.$parent.$attrs.onCancel
+    },
+    canConfirm () {
+      return !!this.$attrs.onSubmit || !!this.$parent.$attrs.onSubmit
+    }
+  },
+  methods: {
+    async handleCancel () {
+      await this.$nextTick()
+      this.visible = true
+      await this.$nextTick()
+      this.$emit('cancel')
+    },
+    async handleConfirm () {
+      await this.$nextTick()
+      this.visible = true
+      await this.$nextTick()
+      this.$emit('submit')
+    }
+  }
+}

package/packages/components/xdialog/mobile.vue

@@ -0,0 +1,43 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <component
+    :is="actionsheet ? 'van-action-sheet' : 'van-dialog'"
+    width="92%"
+    teleport="body"
+    v-bind="$attrs"
+    v-model:show="visible"
+    class="x-dialog mobile-x-dialog"
+    :show-confirm-button="canConfirm"
+    :show-cancel-button="canCancel"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+  >
+    <template v-if="$slots.header || title" #title>
+      <slot name="header" v-if="$slots.header" />
+      <span v-else>{{ title }}</span>
+    </template>
+
+    <template v-if="$slots.default" #default>
+      <slot name="default" />
+    </template>
+
+    <template v-if="$slots.header || title" #description>
+      <slot name="header" v-if="$slots.header" />
+      <span v-else>{{ title }}</span>
+    </template>
+
+    <template v-if="canConfirm || canCancel" #cancel>
+      <van-row>
+        <van-col v-if="canCancel" :span="12">
+          <van-button block @click.stop="handleCancel">{{ cancelText }}</van-button>
+        </van-col>
+        <van-col v-if="canConfirm" :span="12">
+          <van-button block style="color: var(--van-blue);" @click.stop="handleConfirm">{{ submitText }}</van-button>
+        </van-col>
+      </van-row>
+    </template>
+  </component>
+</template>

package/packages/components/xdialog/pc.js

@@ -0,0 +1,64 @@
+export default {
+  name: 'PcXDialog',
+  props: {
+    platform: String,
+    drawer: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '详情'
+    },
+    submitText: {
+      type: String,
+      default: '提交'
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    },
+    onSubmit: Function,
+    onCancel: Function
+  },
+  emits: [
+    'update:modelValue',
+    'submit',
+    'cancel',
+    'fullscreenchange'
+  ],
+  data () {
+    return {
+      fullscreen: this.$attrs.fullscreen || false
+    }
+  },
+  computed: {
+    visible: {
+      get () {
+        return this.modelValue
+      },
+      set (value) {
+        this.$emit('update:modelValue', value)
+      }
+    },
+    hasFooter () {
+      return this.onSubmit || this.$parent.$attrs.onSubmit
+        || this.onCancel || this.$parent.$attrs.onCancel
+        || this.$slots.footer
+    }
+  },
+  methods: {
+    handleToggleFullscreen () {
+      this.fullscreen = !this.fullscreen
+      this.$emit('fullscreenchange', this.fullscreen)
+    }
+  }
+}

package/packages/components/xdialog/pc.vue

@@ -0,0 +1,51 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <component
+    :is="drawer ? 'ElDrawer' : 'ElDialog'"
+    :draggable
+    append-to-body
+    v-bind="$attrs"
+    v-model="visible"
+    :fullscreen
+    :size="$attrs.width"
+    class="x-dialog pc-x-dialog"
+    :class="{ 'pc-x-drawer': drawer, 'no-footer': !hasFooter }"
+  >
+    <template #header>
+      <slot v-if="$slots.header" name="header" />
+      <span v-else class="el-dialog__title">{{ title || '\u3000' }}</span>
+      <x-icon
+        v-if="!drawer"
+        name="FullScreen"
+        class="full el-dialog__headerbtn"
+        style="right: 50px;"
+        @click="handleToggleFullscreen"
+      />
+    </template>
+
+    <slot v-if="$slots.default" name="default" />
+
+    <template #footer>
+      <slot v-if="$slots.footer" name="footer" />
+
+      <el-button
+        v-if="!!onSubmit || !!$parent.$attrs.onSubmit"
+        type="primary"
+        :disabled="$attrs['submit-disabled']"
+        @click="$emit('submit')"
+      >
+        {{ submitText }}
+      </el-button>
+      <el-button
+        v-if="!!onCancel || !!$parent.$attrs.onCancel"
+        :disabled="$attrs['cancel-disabled']"
+        @click="$emit('cancel')"
+      >
+        {{ cancelText }}
+      </el-button>
+    </template>
+  </component>
+</template>

package/packages/components/xdict/index.js

@@ -0,0 +1,47 @@
+import { injectVanFieldProvide } from '../../utils/funcs.js'
+import { baseForm } from '../../utils/model.js'
+import { initForm } from '../../utils/modelUtils.js'
+
+export default {
+  name: 'XDict',
+  props: {
+    modelValue: Object | String | undefined,
+    items: Array
+  },
+  emits: ['update:modelValue'],
+  data () {
+    return {
+      form: baseForm()
+    }
+  },
+  watch: {
+    items: {
+      immediate: true,
+      deep: true,
+      handler () {
+        this.form = this.makeForm()
+      }
+    },
+    'form.form': {
+      deep: true,
+      handler () {
+        this.$emit('update:modelValue', this.form.form)
+        this.provide?.resetValidation()
+      }
+    }
+  },
+  created () {
+    if (window.isMobile) {
+      injectVanFieldProvide(this)
+    }
+  },
+  methods: {
+    makeForm () {
+      const form = baseForm()
+      const span = Math.floor(24 / this.items.length)
+      const fields = this.items.map(it => ({ span: it.span || span, ...it }))
+      initForm(form, fields)
+      return form
+    }
+  }
+}

package/packages/components/xdict/xdict.vue

@@ -0,0 +1,9 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <div class="x-dict" :class="isMobile ? 'mobile-x-dict' : 'pc-x-dict'">
+    <x-form :form hide-labels :gutter="10" v-bind="$attrs" />
+  </div>
+</template>

package/packages/components/xdistrictselect/mobile.js

@@ -0,0 +1,79 @@
+import { areaList } from '@vant/area-data'
+
+const areas = {
+  provinces: [],
+  cities: [],
+  counties: []
+}
+
+areas.provinces = Object.entries(areaList.province_list).map(ele => ({ value: ele[0], text: ele[1] }))
+areas.cities = Object.entries(areaList.city_list).map(ele => ({ value: ele[0], text: ele[1] }))
+areas.counties = Object.entries(areaList.county_list).map(ele => ({ value: ele[0], text: ele[1] }))
+
+export default {
+  name: 'MobileXDistrictSelect',
+  props: {
+    modelValue: String | Array,
+    seperator: {
+      type: String,
+      default: '/'
+    },
+    level: {
+      type: String,
+      default: 'county'
+    },
+    placeholder: {
+      type: String,
+      default: '请选择地区'
+    }
+  },
+  emits: ['update:modelValue', 'change'],
+  data () {
+    return {
+      areaList,
+      visible: false,
+      value: '',
+      area: ''
+    }
+  },
+  computed: {
+    number () {
+      return ({ province: 1, city: 2, county: 3 })[this.level]
+    },
+    text () {
+      return this.modelValue || this.placeholder
+    }
+  },
+  watch: {
+    modelValue: {
+      handler: 'init',
+      immediate: true
+    }
+  },
+  methods: {
+    async init () {
+      if (this.modelValue === this.value) return
+      const parts = Array.isArray(this.modelValue) ? this.modelValue : (this.modelValue || '').split(this.seperator)
+      const [province, city, county] = parts
+      const pCode = areas.provinces.find(p => p.text === province)?.value
+      const pCode2 = pCode?.slice(0, 2)
+      const ciCode = areas.cities.find(c => c.value.startsWith(pCode2) && c.text === city)?.value
+      const cCode4 = ciCode?.slice(0, 4)
+      const coCode = areas.counties.find(c => c.value.startsWith(cCode4) && c.text === county)?.value
+      this.area = coCode
+      if (Array.isArray(this.modelValue)) {
+        this.value = this.modelValue.join(this.seperator)
+        this.$emit('update:modelValue', this.value)
+        this.$emit('change', this.value)
+      }
+    },
+    onConfirm ({ selectedOptions }) {
+      this.visible = false
+      const value = selectedOptions.map(ele => ele.text).join(this.seperator)
+      this.area = selectedOptions[selectedOptions.length - 1].value
+      this.value = value
+      this.$emit('update:modelValue', value)
+      this.$emit('change', value)
+    }
+  }
+}

package/packages/components/xdistrictselect/mobile.vue

@@ -0,0 +1,28 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <div class="x-district-select mobile-x-district-select">
+    <div
+      :class="`x-district-select__${modelValue ? 'value' : 'placeholder'}`"
+      @click="visible = true"
+    >
+      {{ text }}
+    </div>
+    <van-popup
+      v-model:show="visible"
+      position="bottom"
+      :style="{ height: '50%' }"
+    >
+      <van-area
+        v-model="area"
+        :area-list="areaList"
+        :columns-num="number"
+        @click.stop
+        @cancel="visible = false"
+        @confirm="onConfirm"
+      />
+    </van-popup>
+  </div>
+</template>