@wp1001/ui 2.9.13

package/packages/components/xpicker/xpicker.vue

@@ -0,0 +1,29 @@
+<script>
+export { default } from './index.js'
+</script>
+
+<template>
+  <div
+    @click="$emit('show')"
+    :class="`x-picker__${modelValue ? 'value' : 'placeholder'}`"
+  >
+    {{ text }}
+  </div>
+  <van-popup
+    class="x-picker"
+    :class="isMobile ? 'mobile-x-picker' : 'pc-x-picker'"
+    round
+    position="bottom"
+    teleport="body"
+    v-bind="$attrs"
+    v-model:show="visible"
+  >
+    <van-picker
+      :modelValue="value"
+      :title="$attrs.title"
+      :columns
+      @cancel="$emit('cancel')"
+      @confirm="onConfirm"
+    />
+  </van-popup>
+</template>

package/packages/components/xradios/mobile.js

@@ -0,0 +1,40 @@
+import { formatOptions } from '../../utils/index.js'
+
+export default {
+  name: 'MobileXRadios',
+  inheritAttrs: false,
+  props: {
+    text: {
+      type: String,
+      default: 'text'
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String,
+      default: 'value'
+    },
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    sort: Boolean | String,
+    options: Array | Object
+  },
+  data () {
+    return {
+      _options: []
+    }
+  },
+  watch: {
+    options: {
+      immediate: true,
+      deep: true,
+      handler () {
+        this._options = formatOptions(this.options, this)
+      }
+    }
+  }
+}

package/packages/components/xradios/mobile.vue

@@ -0,0 +1,22 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <van-radio-group
+    class="x-radios mobile-x-radios"
+    :class="plain ? 'mobile-x-radios--plain' : ''"
+    v-bind="$attrs"
+    :direction
+  >
+    <van-radio
+      v-for="option in _options"
+      v-bind="$attrs"
+      :disabled="option.raw?.disabled"
+      :key="option.text"
+      :name="option.value"
+    >
+      {{ option.text }}
+    </van-radio>
+  </van-radio-group>
+</template>

package/packages/components/xradios/pc.js

@@ -0,0 +1,53 @@
+import { formatOptions } from '../../utils/index.js'
+
+export default {
+  name: 'PcXRadios',
+  inheritAttrs: false,
+  props: {
+    modelValue: Number | String,
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    text: {
+      type: String,
+      default: 'text'
+    },
+    value: {
+      type: String,
+      default: 'value'
+    },
+    button: {
+      type: Boolean,
+      default: false
+    },
+    sort: Boolean | String,
+    options: Array | Object,
+  },
+  emits: ['update:modelValue', 'change'],
+  data () {
+    return {
+      _options: []
+    }
+  },
+  computed: {
+    attrs () {
+      const {
+        clearable,
+        platform,
+        placeholder,
+        ...others
+      } = this.$attrs
+      return others
+    }
+  },
+  watch: {
+    options: {
+      immediate: true,
+      deep: true,
+      handler () {
+        this._options = formatOptions(this.options, this)
+      }
+    }
+  }
+}

package/packages/components/xradios/pc.vue

@@ -0,0 +1,43 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <el-radio-group
+    class="x-radios pc-x-radios"
+    :class="plain ? 'pc-x-radios--plain' : ''"
+    v-bind="attrs"
+    :modelValue
+    @update:modelValue="value => $emit('update:modelValue', value)"
+    @change="$emit('change', $event)"
+  >
+    <component
+      :is="button ? 'el-radio-button' : 'el-radio'"
+      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>
+    </component>
+  </el-radio-group>
+</template>
+
+<style lang="scss" scoped>
+.pc-x-radios--plain {
+  :deep(.el-radio) {
+    margin-right: 20px;
+    font-weight: normal;
+    .el-radio__input {
+      display: none;
+    }
+  }
+}
+</style>

package/packages/components/xrow/mobile.js

@@ -0,0 +1,9 @@
+export default {
+  name: 'MobileXRow',
+  props: {
+    cols: {
+      type: Array,
+      default: []
+    }
+  }
+}

package/packages/components/xrow/mobile.vue

@@ -0,0 +1,23 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <van-row class="x-row mobile-x-row">
+    <mobile-x-col
+      v-for="(col, index) in cols"
+      v-bind="col"
+      :span="col.xs ?? col.span"
+      :key="index"
+    >
+      <slot
+        v-if="col.slot || $attrs.slot"
+        :name="col.slot || $attrs.slot"
+        :col
+      />
+      <span v-else>{{ col.text }}</span>
+    </mobile-x-col>
+
+    <slot v-if="cols.length === 0" />
+  </van-row>
+</template>

package/packages/components/xrow/pc.js

@@ -0,0 +1,9 @@
+export default {
+  name: 'PcXRow',
+  props: {
+    cols: {
+      type: Array,
+      default: []
+    }
+  }
+}

package/packages/components/xrow/pc.vue

@@ -0,0 +1,22 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <el-row class="x-row pc-x-row">
+    <pc-x-col
+      v-for="(col, index) in cols"
+      v-bind="col"
+      :key="index"
+    >
+      <slot
+        v-if="col.slot || $attrs.slot"
+        :name="col.slot || $attrs.slot"
+        :col
+      />
+      <span v-else>{{ col.text }}</span>
+    </pc-x-col>
+
+    <slot v-if="cols.length === 0" />
+  </el-row>
+</template>

package/packages/components/xscan/mobile.js

@@ -0,0 +1,24 @@
+export default {
+  name: 'MobileXScan',
+  props: {
+    modelValue: String,
+    _label: {
+      type: String,
+      default: '扫码'
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    handleClick () {
+      this.readonly && this.handleScan()
+    },
+    async handleScan () {
+      const code = await StardustBrowser.funcs.scanCode()
+      this.$emit('update:modelValue', code)
+    }
+  }
+}

package/packages/components/xscan/mobile.vue

@@ -0,0 +1,21 @@
+<script>
+export { default } from './mobile.js'
+</script>
+
+<template>
+  <van-field
+    placeholder="点此扫码"
+    class="x-scan mobile-x-scan"
+    v-bind="$attrs"
+    :label="_label"
+    :modelValue
+    :readonly
+    style="padding: 0;"
+    @update:modelValue="v => $emit('update:modelValue', v)"
+    @click.native="handleClick"
+  >
+    <template #right-icon>
+      <van-icon name="scan" @click.native="handleScan" />
+    </template>
+  </van-field>
+</template>

package/packages/components/xscan/pc.js

@@ -0,0 +1,20 @@
+export default {
+  name: 'PcXScan',
+  props: {
+    modelValue: String,
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    handleClick () {
+      this.readonly && this.handleScan()
+    },
+    async handleScan () {
+      const code = await StardustBrowser.funcs.scanCode()
+      this.$emit('update:modelValue', code)
+    }
+  }
+}

package/packages/components/xscan/pc.vue

@@ -0,0 +1,18 @@
+<script>
+export { default } from './pc.js'
+</script>
+
+<template>
+  <el-input
+    class="x-scan pc-x-scan"
+    v-bind="$attrs"
+    :modelValue
+    :readonly
+    @update:modelValue="v => $emit('update:modelValue', v)"
+    @click.native="handleClick"
+  >
+    <template #append>
+      <el-button icon="CameraFilled" @click="handleScan" />
+    </template>
+  </el-input>
+</template>

package/packages/components/xsearcher/index.js

@@ -0,0 +1,198 @@
+import { injectVanFieldProvide } from '../../utils/funcs.js'
+
+const { highdict } = StardustJs
+
+export default {
+  name: 'XSearcher',
+  props: {
+    modelName: String,
+    params: Object,
+    titles: String | Array,
+    subTitles: String | Array,
+    header: Array,
+    operatesWidth: {
+      type: Number,
+      default: 80
+    },
+    modelValue: Boolean | Number | String | Array,
+    multiple: Boolean,
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    value: String,
+    title: String,
+    width: {
+      type: String,
+      default: '660px'
+    },
+    fullscreen: Boolean,
+    hideSearcher: {
+      type: Boolean,
+      default: false
+    },
+    readonly: Boolean,
+    disabled: Boolean,
+    placeholder: String,
+    searcherPlaceholder: String,
+    emptyText: String,
+    formatTitle: Function,
+    formatSubTitle: Function
+  },
+  emits: ['update:modelValue', 'change', 'select'],
+  computed: {
+    _placeholder () {
+      return this.placeholder?.replace('输入', '选择') || '请选择'
+    },
+    _titles () {
+      return [this.titles].flat().filter(k => k)
+    },
+    _subTitles () {
+      return [this.subTitles].flat().filter(k => k)
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      loading: false,
+      keywords: '',
+      list: []
+    }
+  },
+  watch: {
+    modelValue: {
+      immediate: true,
+      handler (value) {
+        value && this.provide?.resetValidation()
+      }
+    }
+  },
+  created () {
+    if (window.isMobile) {
+      injectVanFieldProvide(this)
+    }
+  },
+  methods: {
+    handleFocus (e) {
+      e.target.blur()
+    },
+    handleClear () {
+      if (this.readonly) return
+      const value = this.multiple ? [] : null
+      this.$emit('update:modelValue', value)
+      this.$emit('change', value)
+      this.$emit('select', value, value)
+    },
+    handleShow () {
+      if (this.readonly) return
+      this.visible = true
+      this.handleSearch()
+    },
+    async handleSearch () {
+      if (this.loading) return
+      this.loading = true
+      this.list = await (this.$attrs.search || this.search)(this.modelValue, this.keywords, this.list)
+      this.loading = false
+    },
+    handleSelect (item, index) {
+      if (this.multiple) {
+        const values = Array.isArray(this.modelValue) ? this.modelValue : (this.modelValue ? [this.modelValue] : [])
+        const value = item[this.value]
+        const index = values.indexOf(value)
+        if (index >= 0) {
+          values.splice(index, 1)
+        } else {
+          values.push(value)
+        }
+        this.$emit('update:modelValue', values)
+        this.$emit('change', values)
+        this.$emit('select', values, values.map(v => this.list.find(e => e[this.value] === v)))
+        return
+      }
+      if (this.modelValue === item[this.value]) {
+        this.handleClear()
+      } else {
+        this.$emit('update:modelValue', item[this.value])
+        this.$emit('change', item[this.value])
+        this.$emit('select', item[this.value], item)
+      }
+      this.visible = false
+    },
+    async search (modelValue, keywords) {
+      const attributes = this._titles.concat(this._subTitles)
+      const params = { ...this.params }
+      params.page ||= 1
+      params.limit ||= 20
+      params.attributes ||= attributes.includes(this.value) ? attributes : [...attributes, this.value]
+      params.where ||= {}
+      const ors = []
+      if (this.multiple && !Array.isArray(modelValue)) {
+        modelValue = modelValue ? [modelValue] : []
+      }
+      if (
+        modelValue != undefined && modelValue !== ''
+        && !(this.multiple && !modelValue.length)
+      ) {
+        if (this.multiple) {
+          ors.push({ [this.value]: { '[Op.in]': modelValue } })
+        } else {
+          ors.push({ [this.value]: modelValue })
+        }
+      }
+      keywords = keywords.split(' ').filter(k => k)
+      if (keywords.length) {
+        attributes.forEach(t => {
+          keywords.forEach(k => {
+            ors.push({ [t]: { '[Op.like]': `%${k}%` } })
+          })
+        })
+      }
+      delete params.where['[Op.or]']
+      if (ors.length) params.where['[Op.or]'] = ors
+      const list = await this.service.restful.search(this.modelName, params, 'data')
+      if (this.multiple) {
+        list.sort((a, b) => modelValue.indexOf(b[this.value]) - modelValue.indexOf(a[this.value]))
+        const values = list.map(ele => ele[this.value])
+        const leftValues = modelValue.filter(v => !values.includes(v))
+        if (leftValues.length) {
+          params.where = { [this.value]: { '[Op.in]': leftValues } }
+          const items = await this.service.restful.search(this.modelName, params, 'data')
+          list.push(...items)
+        }
+      }
+      return list
+    },
+    calcTitles (item) {
+      if (this.formatTitle) return this.formatTitle(item)
+      return this._titles.map(key => highdict.get(item, key)).join(' | ')
+    },
+    calcSubTitles (item) {
+      if (this.formatSubTitle) return this.formatSubTitle(item)
+      return this._subTitles.map(key => highdict.get(item, key)).join(' | ')
+    },
+    calcColumns () {
+      const props = this.params?.attributes || [...this.titles, ...this.subTitles]
+      const columns = this.header.map((label, index) => {
+        const column = { prop: props[index], sortable: false }
+        if (typeof label === 'object') {
+          const { label: _label, ...others } = label
+          Object.assign(column, { label: _label, tableAttrs: others })
+        } else {
+          column.label = label
+        }
+        if (this.$slots.cell) {
+          column.tableAttrs ??= {}
+          column.tableAttrs.slot = 'cell'
+        }
+        return column
+      })
+      if (this.$slots.right) {
+        columns.push({
+          label: '操作', prop: 'operates', fixed: 'right', sortable: false,
+          tableAttrs: { slot: 'operates', width: this.operatesWidth * 1 }
+        })
+      }
+      return columns
+    }
+  }
+}