@jx3box/jx3box-ui 0.0.1

package/src/filters/markBy.vue

@@ -0,0 +1,177 @@
+<template>
+    <span class="w-filter-menu">
+        <el-dropdown>
+            <span class="el-dropdown-link">
+                <span class="u-menu-label"
+                    ><el-icon>
+                        <operation />
+                    </el-icon>
+                    {{ current ? current : deftext
+                    }}<el-icon>
+                        <arrow-down /> </el-icon
+                ></span>
+            </span>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item @click="filter('')">{{ "全部" }}</el-dropdown-item>
+                    <el-dropdown-item v-for="(item, key) in marks" :key="key" @click="filter(key)">{{
+                        item
+                    }}</el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+    </span>
+</template>
+
+<script>
+const default_marks = {
+    newbie: "新手易用",
+    advanced: "进阶推荐",
+    recommended: "编辑精选",
+    geek: "骨灰必备",
+};
+export default {
+    name: "markBy",
+    emits: ["filter"],
+    props: {
+        placeholder: {
+            type: String,
+            default: "",
+        },
+        type: {
+            type: String,
+            default: "mark",
+        },
+        marks: {
+            type: Object,
+            default: () => default_marks,
+        },
+    },
+    data: function () {
+        return {
+            visible: false,
+            mark: "",
+        };
+    },
+    computed: {
+        current: function () {
+            return this.marks[this.mark];
+        },
+        deftext: function () {
+            return this.placeholder || "精选";
+        },
+    },
+    methods: {
+        toggleFilter: function () {
+            this.visible = !this.visible;
+        },
+        filter: function (key) {
+            this.mark = key;
+            this.$emit("filter", { type: this.type, val: key });
+            this.visible = false;
+        },
+    },
+    mounted: function () {},
+    components: {},
+};
+</script>
+
+<style lang="less">
+.w-filter-menu {
+    .pointer;
+    .u-menu-label {
+        .flex;
+        align-items: center;
+        gap: 5px;
+        .fz(12px);
+    }
+}
+.w-filter-mark {
+    .fz(12px);
+
+    .u-label {
+        .none;
+    }
+    .u-toggle {
+        .pa;
+        .rt(0);
+        padding: 6px 10px;
+        .pointer;
+
+        .el-icon-arrow-up {
+            .none;
+        }
+
+        &.on {
+            .el-icon-arrow-down {
+                .none;
+            }
+            .el-icon-arrow-up {
+                .db;
+            }
+        }
+    }
+    .u-mode {
+        .mr(15px);
+        .pointer;
+        i {
+            .mr(2px);
+        }
+        &.on {
+            color: @primary;
+        }
+        &:hover {
+            color: @pink;
+        }
+    }
+}
+@media screen and (max-width: @ipad) {
+    .w-filter-mark {
+        .pr;
+        background-color: #f6f8fa;
+        border: 1px solid #eee;
+        .r(4px);
+        user-select: none;
+        padding: 5px 0;
+        padding-right: 20px;
+        min-width: 110px;
+        box-sizing: border-box;
+
+        &.on {
+            .u-options {
+                .db;
+            }
+
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .u-label {
+            padding: 0 10px;
+            .pointer;
+            .db;
+        }
+        .u-options {
+            .pa;
+            .lt(-1px, 29px);
+            padding: 5px 0;
+            .w(100%);
+            background-color: #fff;
+            border: 1px solid #ddd;
+            .z(2);
+            .u-mode {
+                .db;
+                padding: 7px 10px;
+                .pr;
+                .ml(0);
+            }
+            .none;
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .w-filter-mark {
+        .none;
+    }
+}
+</style>

package/src/filters/menuBy.vue

@@ -0,0 +1,63 @@
+<template>
+    <span class="w-filter-menu" v-if="data">
+        <el-dropdown>
+            <span class="el-dropdown-link">
+                <span class="u-menu-label"
+                    ><el-icon> <operation /> </el-icon>{{ current ? current : deftext
+                    }}<el-icon> <arrow-down /> </el-icon
+                ></span>
+            </span>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item @click="filter('')">{{ "全部" }}</el-dropdown-item>
+                    <el-dropdown-item v-for="(item, key) in data" :key="key" @click="filter(key)">{{
+                        item
+                    }}</el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
+    </span>
+</template>
+
+<script>
+export default {
+    name: "menuBy",
+    emits: ["filter"],
+    props: ["data", "type", "placeholder"],
+    data: function () {
+        return {
+            value: "",
+        };
+    },
+    computed: {
+        current: function () {
+            return this.data[this.value];
+        },
+        deftext: function () {
+            return this.placeholder || "筛选";
+        },
+    },
+    methods: {
+        filter: function (key) {
+            this.value = key;
+            this.$emit("filter", { type: this.type, val: key });
+        },
+    },
+    mounted: function () {},
+    components: {},
+};
+</script>
+
+<style lang="less">
+.w-filter-menu {
+    .pointer;
+    .u-menu-label {
+        .flex;
+        align-items: center;
+        i {
+            .mr(5px);
+        }
+        .fz(12px);
+    }
+}
+</style>

package/src/filters/orderBy.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="w-filter-order" :class="{ on: visible }">
+        <span class="u-label" @click="toggleFilter">
+            <span class="u-current-order">排序 : {{ current || "最后更新" }}</span>
+            <span class="u-toggle">
+                <el-icon class="el-icon-arrow-down">
+                    <arrow-down />
+                </el-icon>
+                <el-icon class="el-icon-arrow-up">
+                    <arrow-up />
+                </el-icon>
+            </span>
+        </span>
+        <span class="u-options">
+            <span class="u-mode u-update" :class="{ on: order == 'update' }" @click="filter('update')"
+                ><el-icon>
+                    <refresh />
+                </el-icon>
+                最后更新</span
+            >
+            <span class="u-mode u-podate" :class="{ on: order == 'podate' }" @click="filter('podate')"
+                ><el-icon>
+                    <sort />
+                </el-icon>
+                最早发布</span
+            >
+            <slot></slot>
+        </span>
+    </div>
+</template>
+
+<script>
+const order_map = {
+    update: "最后更新",
+    podate: "最早发布",
+    favs: "收藏最多",
+    likes: "点赞最多",
+    downs: "下载最多",
+};
+export default {
+    name: "orderBy",
+    emits: ["filter"],
+    props: [],
+    data: function () {
+        return {
+            visible: false,
+            order: "update",
+        };
+    },
+    computed: {
+        current: function () {
+            return order_map[this.order];
+        },
+    },
+    methods: {
+        toggleFilter: function () {
+            this.visible = !this.visible;
+        },
+        filter: function (key) {
+            this.order = key;
+            this.$emit("filter", { type: "order", val: key });
+            this.visible = false;
+        },
+    },
+    mounted: function () {},
+    components: {},
+};
+</script>
+
+<style lang="less">
+.w-filter-order {
+    .fz(12px);
+
+    .u-label {
+        .none;
+    }
+    .u-toggle {
+        .pa;
+        .rt(0);
+        padding: 6px 10px;
+        .pointer;
+
+        .el-icon-arrow-up {
+            .none;
+        }
+
+        &.on {
+            .el-icon-arrow-down {
+                .none;
+            }
+            .el-icon-arrow-up {
+                .db;
+            }
+        }
+    }
+    .u-options {
+        .flex;
+        gap: 15px;
+        align-items: center;
+    }
+    .u-mode {
+        .flex;
+        gap: 2px;
+        align-items: center;
+        .pointer;
+        &.on {
+            color: @primary;
+        }
+        &:hover {
+            color: @pink;
+        }
+    }
+}
+@media screen and (max-width: @ipad) {
+    .w-filter-order {
+        .pr;
+        background-color: #f6f8fa;
+        border: 1px solid #eee;
+        .r(4px);
+        user-select: none;
+        padding: 5px 0;
+        padding-right: 20px;
+
+        &.on {
+            .u-options {
+                .flex;
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0;
+            }
+
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .u-label {
+            padding: 0 10px;
+            .pointer;
+            .db;
+        }
+        .u-options {
+            .pa;
+            .lt(-1px, 29px);
+            padding: 5px 0;
+            .w(100%);
+            background-color: #fff;
+            border: 1px solid #ddd;
+            .z(2);
+            .flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 0;
+            .u-mode {
+                .flex;
+                align-items: center;
+                gap: 2px;
+                padding: 7px 10px;
+                .pr;
+                .ml(0);
+            }
+            .none;
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .w-filter-order {
+        .none;
+    }
+}
+</style>

package/src/filters/tagBy.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="w-filter-tag" :class="{ on: visible }">
+        <span class="u-label" @click="toggleFilter">
+            <span class="u-current-filter"
+                ><el-icon>
+                    <collection-tag />
+                </el-icon>
+                {{ current || "全部" }}</span
+            >
+            <span class="u-toggle">
+                <el-icon class="el-icon-arrow-down">
+                    <arrow-down />
+                </el-icon>
+                <el-icon class="el-icon-arrow-up">
+                    <arrow-up />
+                </el-icon>
+            </span>
+        </span>
+        <span class="u-options">
+            <span class="u-mode u-all" :class="{ on: value === '' }" @click="filter('', '')"
+                ><el-icon>
+                    <collection-tag />
+                </el-icon>
+                全部</span
+            >
+            <span
+                v-for="(item, key) in data"
+                :key="key"
+                class="u-mode"
+                :class="{ on: item == current }"
+                @click="filter(key)"
+                ><el-icon>
+                    <collection-tag />
+                </el-icon>
+                {{ item }}</span
+            >
+            <slot></slot>
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "tagBy",
+    emits: ["filter"],
+    props: ["data", "type"],
+    data: function () {
+        return {
+            visible: false,
+            value: "",
+        };
+    },
+    computed: {
+        current: function () {
+            return this.data[this.value];
+        },
+    },
+    methods: {
+        toggleFilter: function () {
+            this.visible = !this.visible;
+        },
+        filter: function (key) {
+            this.value = key;
+            this.$emit("filter", { type: this.type, val: key });
+            this.visible = false;
+        },
+    },
+    mounted: function () {},
+    components: {},
+};
+</script>
+
+<style lang="less">
+.w-filter-tag {
+    .fz(12px);
+
+    .u-label {
+        .none;
+    }
+    .u-current-filter {
+        .flex;
+        align-items: center;
+        gap: 5px;
+    }
+    .u-toggle {
+        .pa;
+        .rt(0);
+        padding: 6px 10px;
+        .pointer;
+
+        .el-icon-arrow-up {
+            .none;
+        }
+
+        &.on {
+            .el-icon-arrow-down {
+                .none;
+            }
+            .el-icon-arrow-up {
+                .db;
+            }
+        }
+    }
+    .u-options {
+        .flex;
+        gap: 15px;
+    }
+    .u-mode {
+        .flex;
+        align-items: center;
+        gap: 2px;
+        .pointer;
+        &.on {
+            color: @primary;
+        }
+        &:hover {
+            color: @pink;
+        }
+    }
+}
+@media screen and (max-width: @ipad) {
+    .w-filter-tag {
+        .pr;
+        background-color: @bg-light;
+        border: 1px solid #ddd;
+        .r(4px);
+        user-select: none;
+        padding: 6px 0;
+        padding-right: 20px;
+
+        &.on {
+            .u-options {
+                flex-direction: column;
+            }
+
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .u-label {
+            padding: 0 10px;
+            .pointer;
+            .db;
+        }
+        .u-options {
+            flex-direction: column;
+            .pa;
+            .lt(-1px, 29px);
+            padding: 5px 0;
+            .w(100%);
+            background-color: #fff;
+            border: 1px solid #ddd;
+            .z(2);
+            .u-mode {
+                .flex;
+                align-items: center;
+                gap: 5px;
+                padding: 7px 10px;
+                .pr;
+                .ml(0);
+            }
+            .none;
+        }
+    }
+}
+@media screen and (max-width: @phone) {
+    .w-filter-tag {
+        .none;
+    }
+}
+</style>