yks-element 1.0.0 → 1.0.315

package/packages/Select/index.js

@@ -0,0 +1,8 @@
+import YksSelect from './src/index';
+
+/* istanbul ignore next */
+YksSelect.install = function(Vue) {
+  Vue.component(YksSelect.name, YksSelect);
+};
+
+export default YksSelect;

package/packages/Select/src/index.vue

@@ -0,0 +1,350 @@
+<template>
+    <el-select
+        ref="infiniteSelect"
+        v-model="query"
+        class="yks-select"
+        :class="{ 'yks-select--multiple': multiple }"
+        v-bind="mapProps"
+        :multiple="multiple"
+        :disabled="disabled"
+        :value-key="valueKey"
+        :size="size"
+        :clearable="clearable"
+        :name="name"
+        :filterable="mapFilterable"
+        :filter-method="filterMethodHandler()"
+        :remote="remote"
+        :popper-class="mapPopperClass"
+        @visible-change="(val) => visibleChangeHandler(val)"
+        v-on="$listeners"
+    >
+        <template v-if="domLimit">
+            <yks-option
+                v-for="(item, idx) in renderList"
+                :key="valueKey ? item[mapValue][valueKey] : item[mapValue]"
+                :label="item[mapLabel] ? item[mapLabel] : item[mapValue]"
+                :value="item[mapValue]"
+                :disabled="item[mapDisabled] ? item[mapDisabled] : false"
+                :data-items-index="currStartIndex + idx"
+                :class="{ 'last-item': idx === renderList.length - 1, 'first-item': idx === 0 }"
+            >
+                <slot :item="item" name="options"></slot>
+            </yks-option>
+        </template>
+        <slot v-if="!domLimit"></slot>
+        <div v-if="allowBottom" class="yks-select-bottom">
+            <slot name="footer"></slot>
+        </div>
+        <template slot="empty">
+            <p class="el-select-dropdown__empty">无数据</p>
+            <div v-if="allowBottom" class="yks-select-bottom">
+                <slot name="footer"></slot>
+            </div>
+        </template>
+    </el-select>
+</template>
+<script>
+import { debounce } from 'throttle-debounce'
+import { on, getStyle } from 'element-ui/lib/utils/dom'
+
+import ElSelect from 'element-ui/lib/select'
+
+const selectProps = { ...ElSelect.props }
+/**
+ * YksSelect
+ * @module yks-select
+ * @example
+ *
+ */
+
+export default {
+    name: 'YksSelect',
+    components: {
+        ElSelect
+    },
+    /**
+     * 属性参数
+     * @member
+     * @property {Object} [data] 数据选项
+     * @property {Boolean} [dom-limit] 是否渲染,默认值为true
+     * @property {Number} [dom-num] 每页渲染的dom数目，最终渲染3页，dom节点数为domNum*3
+     * @property {Object} [option-map] 自定义value,label,disabled名称
+     * @property {Boolean} [disabled] 是否禁用
+     * @property {String} [size] 输入框尺寸
+     * @property {Boolean} [clearable] 单选时是否可以清空选项
+     * @property {Number} [multiple-limit] 多选时用户最多可以选择的项目数，为 0 则不限制
+     * @property {String} [placeholder] 占位符
+     * @property {Boolean} [filterable] 是否可搜索
+     * @property {Boolean} [filterableInline] 搜索框是否在下拉框里面
+     * @property {Boolean} [allow-create] 是否允许用户创建新条目，需配合 filterable 使用
+     * @property {Boolean} [collapse-tags] 多选时是否将选中值按文字的形式展示
+     * @property {Function} [filter-method] 自定义搜索方法
+     * @property {Boolean} [remote] 是否为远程搜索
+     * @property {Function} [scrollBottom] 远程搜索时滚动到底部触发
+     * @property {Function} [remote-method] 远程搜索方法
+     * @property {Boolean} [loading] 是否正在从远程获取数据
+     * @property {String} [loading-text] 远程加载时显示的文字
+     * @property {String} [no-match-text] 搜索条件无匹配时显示的文字
+     * @property {String} [no-data-text] 选项为空时显示的文字
+     * @property {String} [popper-class] Select 下拉框的类名
+     * @property {String} [allow-bottom] 是否出现底部吸底
+     * @property {String} [reserve-keyword] 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
+     * @property {Boolean} [default-first-option] 在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用
+     * @property {Boolean} [popper-append-to-body] 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false
+     */
+    props: {
+        ...selectProps,
+        domNum: {
+            type: Number,
+            default: 10
+        },
+        data: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        },
+        valueKey: {
+            type: String,
+            default: ''
+        },
+        clearable: {
+            type: Boolean,
+            default: false
+        },
+        allowBottom: {
+            type: Boolean,
+            default: false
+        },
+        filterableInline: {
+            type: Boolean,
+            default: false
+        },
+        domLimit: {
+            type: Boolean,
+            default: true
+        },
+        optionMap: {
+            type: Object,
+            default() {
+                return null
+            }
+        }
+    },
+    data() {
+        return {
+            selectLabel: '',
+            defaultItemHeight: 34,
+            query: '',
+
+            cacheList: [],
+            currStartIndex: 0,
+            lastMaxItemIndex: 0,
+            lastLoadedIndex: 0,
+            scrollHeight: null,
+            scrollTop: null,
+            wrapPaddingTop: 0,
+            itemHeight: null,
+            isLoading: false,
+            visible: false,
+            scrollWrap: null,
+            selectInput: null,
+            selectInitHeight: null,
+            scrollList: null,
+            scrollLast: null,
+            renderList: [],
+            // emptyText: null,
+            cachedQuery: '',
+            changeValue: '',
+            cachedPlaceHolder: ''
+        }
+    },
+    computed: {
+        mapFilterable() {
+            return this.filterable || this.filterableInline
+        },
+        mapProps() {
+            let params = { ...this.$props }
+            delete params.data
+            delete params.domLimit
+            delete params.domNum
+            delete params.filterableInline
+            return params
+        },
+        mapPopperClass() {
+            let popperClass = `yks-select-dropdown ${this.popperClass || ''}`
+            if (this.filterableInline) {
+                popperClass += 'yks-select_input--inline'
+            }
+            return popperClass
+        },
+        debounce() {
+            return this.remote ? 300 : 0
+        },
+        mapValue() {
+            return this.optionMap && this.optionMap.value ? this.optionMap.value : 'value'
+        },
+        mapLabel() {
+            return this.optionMap && this.optionMap.label ? this.optionMap.label : 'label'
+        },
+        mapDisabled() {
+            return this.optionMap && this.optionMap.disabled ? this.optionMap.disabled : 'disabled'
+        }
+    },
+    watch: {
+        query(val) {
+            this.resetTagTitle()
+
+            // this.cachedQuery = val
+            // if (!this.multiple && this.remote) {
+            //     this.$nextTick(() => {
+            //         this.$refs.infiniteSelect.currentPlaceholder =
+            //             this.$refs.infiniteSelect.selectedLabel ||
+            //             this.$refs.infiniteSelect.cachedPlaceHolder
+            //     })
+            // }
+            this.$emit('input', val)
+        },
+        value(val) {
+            // console.log(val, '响应的')
+            // this.updateCacheOptions()
+            this.query = val
+        },
+
+        data: {
+            handler(val, oldVal) {
+                // if (this.domLimit) {
+                //     this.cacheList = [...oldVal]
+                this.resetRenderList()
+                //     this.updateCacheOptions()
+                // }
+            },
+            deep: true
+        }
+    },
+    mounted() {
+        this.query =
+            typeof this.value === Array ? JSON.parse(JSON.stringify(this.value)) : this.value
+        this.resetRenderList()
+        if (this.remote) {
+            // this.cacheList = [...this.data]
+            // this.updateCacheOptions()
+            this.scrollHandler = this.scrollHandler.bind(this)
+            this.scrollWrap = this.$refs.infiniteSelect.$el.querySelector(
+                '.el-select-dropdown__wrap'
+            )
+            this.selectInput = this.$refs.infiniteSelect.$el
+            this.selectInitHeight = this.$refs.infiniteSelect.$el.offsetHeight
+            this.scrollList = this.scrollWrap.querySelector('.el-select-dropdown__list')
+
+            this.wrapPaddingTop = getStyle(this.scrollList, 'paddingTop')
+            this.wrapPaddingTop = parseFloat(this.wrapPaddingTop.split('px')[0] || 0)
+            on(this.scrollWrap, 'scroll', this.scrollHandler)
+        }
+        this.scrollLast = debounce(this.debounce, () => {
+            this.$emit('scrollBottom', true)
+            this.isLoading = false
+        })
+        this.resetTagTitle()
+    },
+    created() {
+        if (this.multiple && !Array.isArray(this.value)) {
+            this.$emit('input', [])
+        }
+        if (!this.multiple && Array.isArray(this.value)) {
+            this.$emit('input', '')
+        }
+    },
+
+    methods: {
+        resetTagTitle() {
+            this.$nextTick(() => {
+                if (this.multiple) {
+                    const tagList = this.$refs.infiniteSelect.$refs.tags.querySelectorAll(
+                        '.el-select__tags-text'
+                    )
+                    tagList.forEach((v) => {
+                        if (v.nextSibling) {
+                            v.title = v.innerHTML
+                        }
+                    })
+                }
+            })
+        },
+        filterMethodHandler() {
+            return this.filterMethod
+        },
+        resetRenderList() {
+            this.renderList = this.data
+        },
+        focus() {
+            this.$refs.infiniteSelect.focus()
+        },
+        blur() {
+            this.$refs.infiniteSelect.blur()
+        },
+        visibleChangeHandler(val) {
+            // if (this.domLimit) {
+            //     if (val) {
+            //         this.cacheList = [...this.data]
+            //         this.resetRenderList()
+            //     }
+            // }
+
+            this.$emit('visible-change', val)
+        },
+        scrollHandler(e) {
+            let lastItemTop
+            if (!this.scrollHeight) {
+                this.scrollHeight = this.scrollWrap.getBoundingClientRect().height
+                this.scrollTop = this.scrollWrap.getBoundingClientRect().top
+                this.itemHeight = this.scrollList
+                    .querySelector('.el-select-dropdown__item')
+                    .getBoundingClientRect().height
+            }
+            if (this.isLoading) {
+                return
+            } else {
+                let length = this.scrollWrap.querySelectorAll('.el-select-dropdown__item').length
+                lastItemTop = this.scrollWrap
+                    .querySelectorAll('.el-select-dropdown__item')
+                    [length - 1].getBoundingClientRect()
+                let multiOffsetHeight = this.selectInput.offsetHeight - this.selectInitHeight
+                lastItemTop = lastItemTop.top - this.scrollTop - multiOffsetHeight
+            }
+
+            if (lastItemTop <= this.scrollHeight) {
+                this.isLoading = true
+                if (this.remote) {
+                    this.scrollLast()
+                    // } else {
+                    //     this.appendNewItems(
+                    //         this.scrollList.getBoundingClientRect().height,
+                    //         getScroll(this.scrollWrap, true)
+                    //     )
+                }
+
+                return
+            }
+        },
+
+        updateCacheOptions() {
+            // this.$refs.infiniteSelect.setSelected()
+            // console.log(this.$refs.infiniteSelect.selected)
+            // let selected = this.$refs.infiniteSelect.selected
+            // this.$refs.infiniteSelect.cachedOptions.push(...selected)
+            // this.cacheList = this
+            // console.log(this.$refs.infiniteSelect.setSelected())
+            // console.log(this.$refs.infiniteSelect.cachedOptions)
+            // this.$refs.infiniteSelect.cachedOptions = this.cacheList.map((r) => {
+            //     return {
+            //         label: r[this.mapLabel],
+            //         value: r[this.mapValue],
+            //         currentLabel: r[this.mapLabel],
+            //         currentValue: r[this.mapValue]
+            //     }
+            // })
+        }
+    }
+}
+</script>

package/packages/Select/src/option.vue

@@ -0,0 +1,29 @@
+<template>
+    <el-option class="yks-option" v-bind="$props" :title="mapTitle" v-on="$listeners">
+        <slot></slot>
+    </el-option>
+</template>
+
+<script>
+/**
+ * 新增属性参数  el-option 扩展参数
+
+ */
+import ElOption from 'element-ui/lib/option'
+export default {
+    name: 'YksOption',
+    components: {
+        ElOption
+    },
+    props: {
+        ...ElOption.props
+    },
+    computed: {
+        mapTitle() {
+            return this.label || this.value
+        }
+    }
+}
+</script>
+
+<style></style>

package/packages/Table/index.js

@@ -0,0 +1,8 @@
+import YksTable from './src/index';
+
+/* istanbul ignore next */
+YksTable.install = function(Vue) {
+  Vue.component(YksTable.name, YksTable);
+};
+
+export default YksTable;

package/packages/Table/src/index.vue

@@ -0,0 +1,141 @@
+<template>
+    <el-table
+        ref="table"
+        class="ks-table"
+        :data="tableData"
+        v-bind="tableOptions"
+        v-on="$listeners"
+    >
+        <slot v-if="!dom"></slot>
+        <template v-if="dom">
+            <template v-for="(col, index) in tableColumns">
+                <!-- 定义 index、selection 类型的列-->
+                <el-table-column
+                    v-if="col.type === 'index' || col.type === 'selection'"
+                    :key="index"
+                    v-bind="col"
+                    class-name="xdh-table--not-drag"
+                ></el-table-column>
+
+                <!-- 定义 expand 类型的列-->
+                <el-table-column v-else-if="col.type === 'expand'" :key="index" v-bind="col">
+                    <template v-slot="scope">
+                        <div class="expand-table">
+                            <slot
+                                name="expand"
+                                :row="scope.row"
+                                :scope="scope"
+                                :$index="scope.$index"
+                                :column="tableColumns[index]"
+                                :columnIndex="index"
+                            ></slot>
+                        </div>
+                    </template>
+                </el-table-column>
+
+                <!-- 定义通用类型的列-->
+                <el-table-column v-else :key="index" v-bind="col">
+                    <!-- prettier-ignore-attribute (slot-scope) -->
+                    <template v-if="!col.type" v-slot="scope">
+                        <slot
+                            :name="col.prop || 'default'"
+                            :row="scope.row"
+                            :$index="scope.$index"
+                            :column="tableColumns[index]"
+                            :columnIndex="index"
+                        >
+                            {{ scope.row[col.prop] }}
+                        </slot>
+                    </template>
+                    <template v-slot:header="scope">
+                        <slot
+                            :name="'header' + (col.prop || '')"
+                            :column="scope.column"
+                            :$index="scope.$index"
+                        >
+                            {{ scope.column['label'] }}
+                        </slot>
+                    </template>
+                </el-table-column>
+            </template>
+        </template>
+
+        <!--暴露 el-table append 插槽-->
+        <slot slot="append" name="append"></slot>
+
+        <!--暴露 el-table empty 插槽-->
+        <slot slot="empty" name="empty">
+            <el-empty class="table-empty" :image-size="60" :description="' '"></el-empty>
+        </slot>
+    </el-table>
+</template>
+
+<script>
+import ElTable from 'element-ui/lib/table'
+
+/**
+ * Table 表格组件
+ * @module yks-table
+ */
+export default {
+    name: 'YksTable',
+
+    /**
+     * 属性参数，完全继承 el-table参数，并有以下扩展参数
+     * @property {Array} [data = []] 表格行数据
+     * @property {Array} [columns = []]  表格列定义，对象属性参数完全继承 el-table-column
+     * @property {Boolean} [dom = true]  自定义列
+     */
+    props: {
+        ...ElTable.props,
+        columns: {
+            type: Array,
+            default() {
+                return []
+            }
+        },
+        dom: {
+            type: Boolean,
+            default: true
+        },
+        emptyMsg: {
+            type: String,
+            default: '暂无数据~'
+        }
+    },
+
+    data() {
+        return {
+            // 表格列定义数组
+            tableColumns: this.columns,
+
+            // 表格行数据
+            tableData: this.data
+        }
+    },
+    computed: {
+        // el-table 参数
+        tableOptions() {
+            const options = { ...this.$props }
+            delete options.columns
+            delete options.data
+            delete Option.dom
+            delete Option.showMessage
+            return options
+        }
+    },
+    watch: {
+        data(val) {
+            this.tableData = val
+        },
+        columns(val) {
+            this.tableColumns = val
+            const data = this.tableData
+            this.tableData = []
+            this.$nextTick(() => {
+                this.tableData = data
+            })
+        }
+    }
+}
+</script>

package/packages/Tinymce/index.js

@@ -0,0 +1,8 @@
+import YksTinymce from './src/index';
+
+/* istanbul ignore next */
+YksTinymce.install = function(Vue) {
+  Vue.component(YksTinymce.name, YksTinymce);
+};
+
+export default YksTinymce;

package/packages/Tinymce/src/config.js

@@ -0,0 +1,25 @@
+// Import plugins that you want to use
+// Detail plugins list see: https://www.tinymce.com/docs/plugins/
+// Custom builds see: https://www.tinymce.com/download/custom-builds/
+export const plugins = [
+    'advlist anchor autolink autosave code codesample directionality emoticons fullscreen hr image imagetools insertdatetime link lists nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textpattern visualblocks visualchars wordcount'
+]
+
+// Here is the list of toolbar control components
+// Details see: https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
+export const toolbar = [
+    'bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript code codesample',
+    'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen paste'
+]
+
+export const uploadAudio =
+    '<svg t="1648778606755" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2398" width="20" height="18"><path d="M204.8 0h477.866667l273.066666 273.066667v614.4c0 75.093333-61.44 136.533333-136.533333 136.533333H204.8c-75.093333 0-136.533333-61.44-136.533333-136.533333V136.533333C68.266667 61.44 129.706667 0 204.8 0z m464.213333 375.466667l-232.106666 61.44c-27.306667 13.653333-47.786667 34.133333-47.786667 61.44v218.453333s-20.48-13.653333-54.613333-6.826667c-47.786667 6.826667-95.573333 47.786667-95.573334 88.746667 0 40.96 47.786667 61.44 95.573334 54.613333 54.613333-6.826667 95.573333-40.96 95.573333-81.92V559.786667c0-13.653333 27.306667-27.306667 27.306667-27.306667L655.36 477.866667s20.48-6.826667 20.48 13.653333v170.666667s-20.48-13.653333-54.613333-6.826667c-54.613333 6.826667-95.573333 40.96-95.573334 81.92s47.786667 68.266667 95.573334 61.44 95.573333-40.96 95.573333-81.92V409.6c0-27.306667-27.306667-40.96-47.786667-34.133333z" fill="#222f3e" p-id="2399"></path><path d="M682.666667 0l273.066666 273.066667h-204.8c-40.96 0-68.266667-27.306667-68.266666-68.266667V0z" fill="#222f3e" opacity=".619" p-id="2400"></path></svg>'
+
+export const uploadVideo =
+    '<svg t="1648778822578" class="icon" viewBox="0 0 1087 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3355" width="20" height="20"><path d="M768 415.744q0 5.12-10.752 17.92t-23.04 30.208-23.04 37.888-10.752 41.984 10.752 41.472 23.04 36.352 23.04 27.136 10.752 13.824l0 107.52q0 17.408-12.8 39.424t-31.744 41.472-41.984 32.256-43.52 12.8l-508.928 0q-27.648 0-50.688-9.728t-40.448-27.136-27.136-40.96-9.728-51.2l0-441.344q0-20.48 9.216-42.496t26.112-40.448 39.936-30.72 50.688-12.288l508.928 0q27.648 0 51.712 9.728t41.984 26.624 28.16 40.448 10.24 50.176l0 89.088zM1086.464 319.488l0 467.968q0 22.528-11.776 39.936t-35.328 17.408q-8.192 0-20.992-6.144t-25.6-14.336-24.064-16.384-16.384-13.312q-13.312-11.264-40.448-38.912t-54.784-62.464-48.64-71.68-20.992-67.584 22.528-70.144 54.272-77.312 66.56-70.144 58.368-48.64q9.216-6.144 25.088-14.848t28.16-8.704q27.648 0 35.84 15.36t8.192 37.888l0 2.048z" p-id="3356" fill="#222f3e"></path></svg>'
+
+export const uploadFile =
+    '<svg t="1648778907477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4315" width="24" height="24"><path d="M736.005 696.494H174.18c-17.673 0-32-14.327-32-32V255.582c0-17.673 14.327-32 32-32h157.213c7.96 0 15.635 2.967 21.525 8.321l47.547 43.222h335.54c17.673 0 32 14.327 32 32v357.369c0 17.673-14.327 32-32 32z m-529.825-64h497.825V339.125H388.094a32.002 32.002 0 0 1-21.525-8.321l-47.547-43.222H206.18v344.912z" fill="#222f3e" p-id="4316"></path><path d="M853.18 821.092H317.509c-17.673 0-32-14.327-32-32s14.327-32 32-32H821.18V414.206c0-17.673 14.327-32 32-32s32 14.327 32 32v374.886c0 17.673-14.327 32-32 32z" fill="#222f3e" p-id="4317"></path></svg>'
+
+export const uploadRecording =
+    '<svg t="1648782146375" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5288" width="20" height="20"><path d="M512 683.52c130.56 0 235.52-102.4 235.52-232.96V256c0-130.56-104.96-232.96-235.52-232.96s-235.52 102.4-235.52 232.96v194.56c0 130.56 102.4 232.96 235.52 232.96z m368.64-281.6c0-23.04-20.48-43.52-46.08-43.52s-43.52 20.48-43.52 43.52c0 5.12 0 10.24 2.56 12.8v33.28c0 151.04-125.44 276.48-281.6 276.48-153.6 0-281.6-125.44-281.6-276.48V409.6c0-2.56 2.56-5.12 2.56-10.24 0-23.04-20.48-43.52-43.52-43.52-25.6 0-43.52 20.48-43.52 43.52v64c0 186.88 140.8 335.36 320 360.96v87.04h-122.88c-25.6 0-46.08 20.48-46.08 46.08s20.48 43.52 46.08 43.52h332.8c28.16 0 43.52-17.92 43.52-43.52 0-23.04-17.92-46.08-43.52-46.08h-122.88v-87.04c184.32-20.48 327.68-174.08 327.68-360.96v-61.44z m0 0" fill="#222f3e" p-id="5289"></path></svg>'