@fishawack/lab-velocity 2.0.0-beta.6 → 2.0.0-beta.60

package/_Build/js/libs/utility.js

@@ -0,0 +1,161 @@
+export function eachNode(nodes, cb) {
+    nodes = document.querySelectorAll(nodes);
+
+    for (var i = 0, len = nodes.length; i < len; i++) {
+        cb(nodes[i], i);
+    }
+}
+
+export function parse_query_string(query) {
+    var vars = query.split("&");
+    var query_string = {};
+    for (var i = 0; i < vars.length; i++) {
+        var pair = vars[i].split("=");
+        // If first entry with this name
+        if (typeof query_string[pair[0]] === "undefined") {
+            query_string[pair[0]] = decodeURIComponent(pair[1]);
+            // If second entry with this name
+        } else if (typeof query_string[pair[0]] === "string") {
+            var arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
+            query_string[pair[0]] = arr;
+            // If third or later entry with this name
+        } else {
+            query_string[pair[0]].push(decodeURIComponent(pair[1]));
+        }
+    }
+    return query_string;
+}
+
+export function load(path, mimetype, pages, index, arr) {
+    return new Promise((resolve) => {
+        index = index || 1;
+
+        var xobj = new XMLHttpRequest();
+        if (mimetype) {
+            xobj.overrideMimeType(mimetype);
+        }
+
+        xobj.open(
+            "GET",
+            pages ? `${path}?per_page=100&page=${index}` : path,
+            true,
+        );
+        xobj.onreadystatechange = function () {
+            if (
+                xobj.readyState === 4 &&
+                (+xobj.status === 200 || +xobj.status === 0)
+            ) {
+                var data = JSON.parse(xobj.responseText);
+
+                if (!pages) {
+                    resolve(data);
+                } else {
+                    var current = +xobj.getResponseHeader("x-wp-totalpages");
+
+                    if (!arr) {
+                        arr = data || [];
+                    } else {
+                        arr = arr.concat(data);
+                    }
+
+                    if (current && current !== index) {
+                        load(path, mimetype, pages, ++index, arr).then((res) =>
+                            resolve(res),
+                        );
+                    } else {
+                        resolve(arr);
+                    }
+                }
+            }
+        };
+        xobj.send(null);
+    });
+}
+
+export function classList(el) {
+    var list = el.classList;
+
+    return {
+        toggle: function (c) {
+            list.toggle(c);
+            return this;
+        },
+        add: function (c) {
+            list.add(c);
+            return this;
+        },
+        remove: function (c) {
+            list.remove(c);
+            return this;
+        },
+    };
+}
+
+var blueprints = {};
+export function blueprint(selector, array, cb, root, node) {
+    var nodes;
+
+    if (!node) {
+        nodes = (root || document).querySelectorAll(selector);
+    } else {
+        nodes = [node];
+    }
+
+    var blueprint;
+
+    if (blueprints[selector]) {
+        blueprint = blueprints[selector];
+    } else {
+        blueprint = nodes[0].children[0];
+        blueprint.classList.remove("ut-hide");
+        blueprints[selector] = blueprint;
+    }
+
+    var docFrag = document.createDocumentFragment();
+
+    array.forEach(function (d, i, arr) {
+        var item = blueprint.cloneNode(true);
+
+        cb(item, d, i, arr);
+
+        docFrag.appendChild(item);
+    });
+
+    for (var i = nodes.length; i--; ) {
+        nodes[i].innerHTML = "";
+
+        nodes[i].appendChild(docFrag);
+    }
+}
+
+export function styleguide() {
+    let colors = [].slice
+        .call(document.styleSheets[0].cssRules)
+        .filter((d) => d.selectorText && d.selectorText.includes(".color-"))
+        .map((d) => d.selectorText);
+
+    let length = 0;
+    /* jshint ignore:start */
+    while (colors.find((d) => d === `.color-${length}`)) {
+        length++;
+    }
+    /* jshint ignore:end */
+    eachNode(".js-styleguide-dynamic", (node) => {
+        let name = node.dataset.styleguideDynamic;
+        blueprint(
+            name,
+            Array(length).fill(0),
+            (item, d, i) => {
+                let text = item.querySelector(".js-styleguide-index");
+                if (text) {
+                    text.innerText = i;
+                }
+                classList(item.querySelector(`.${name}`) || item)
+                    .remove(name)
+                    .add(`${name}${i}`);
+            },
+            null,
+            node,
+        );
+    });
+}

package/_Build/vue/components/basic/Button.vue

@@ -34,7 +34,7 @@ export default {
         },
         type: {
             type: String,
-            default: null,
+            default: "default",
         },
         name: {
             type: String,

package/_Build/vue/components/form/Avatar.vue

@@ -0,0 +1,90 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-upload
+            action="#"
+            :auto-upload="false"
+            :show-file-list="false"
+            accept="image/*"
+            :on-change="onFileChange"
+        >
+            <img
+                v-if="imgSrc"
+                :src="imgSrc"
+                style="
+                    max-width: 150px;
+                    max-height: 150px;
+                    display: block;
+                    cursor: pointer;
+                    margin-bottom: 0.5rem;
+                "
+            />
+            <div v-else style="margin-bottom: 0.5rem">
+                <slot name="placeholder">
+                    <el-button type="primary" plain> Upload Avatar </el-button>
+                </slot>
+            </div>
+        </el-upload>
+        <div v-if="content" style="margin-top: 0.5rem">
+            <el-button type="danger" size="small" @click="cancel">
+                Clear
+            </el-button>
+        </div>
+    </XInput>
+</template>
+
+<script>
+import { ElUpload, ElButton } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+
+    components: { XInput, ElUpload, ElButton },
+
+    props: {
+        ...input.props,
+        baseClass: {
+            type: String,
+            default: "vel-basic",
+        },
+        preview: {
+            type: String,
+            default: null,
+        },
+    },
+
+    data() {
+        return {
+            imgSrc: null,
+        };
+    },
+
+    mounted() {
+        this.imgSrc = this.preview;
+    },
+
+    watch: {
+        preview(val) {
+            if (!this.content) this.imgSrc = val;
+        },
+    },
+
+    methods: {
+        onFileChange(uploadFile) {
+            this.content = uploadFile.raw;
+            this.imgSrc = URL.createObjectURL(uploadFile.raw);
+            this.handleInput();
+        },
+        cancel() {
+            this.content = null;
+            this.imgSrc = this.preview;
+            this.handleInput();
+        },
+    },
+};
+</script>

package/_Build/vue/components/form/Checkbox.vue

@@ -6,6 +6,8 @@
             :disabled="disabled"
             v-model="content"
             :required="required"
+            :true-label="trueValue"
+            :false-label="falseValue"
             @change="handleInput"
         >
         </el-checkbox>
@@ -29,6 +31,14 @@ export default {
             type: String,
             default: "vel-checkbox",
         },
+        trueValue: {
+            type: [String, Number, Boolean],
+            default: true,
+        },
+        falseValue: {
+            type: [String, Number, Boolean],
+            default: false,
+        },
     },
 
     components: {

package/_Build/vue/components/form/InputNumber.vue

@@ -20,7 +20,7 @@
             :placeholder="placeholder"
             v-model="content"
             :required="required"
-            @input="handleInput"
+            @change="handleInput"
         >
             <template #prefix>
                 <slot name="prefix" />

package/_Build/vue/components/form/Select.vue

@@ -5,6 +5,7 @@
         </template>
 
         <el-select
+            ref="select"
             v-model="content"
             :class="baseClass"
             :multiple="multiple"
@@ -14,32 +15,35 @@
             :collapse-tags="collapseTags"
             :filterable="filterable"
             :value-on-clear="null"
-            @change="handleInput"
-            @clear="this.$emit('clear')"
-            @blur="this.$emit('blur')"
+            remote-show-suffix
+            :remote="!!endpoint"
+            :remote-method="endpoint ? handleSearch : undefined"
+            :loading="initialLoading"
             :empty-values="[null, undefined]"
+            :value-key="effectiveValueKey"
+            @change="handleInput"
+            @clear="$emit('clear')"
+            @blur="$emit('blur')"
+            @visible-change="handleVisibleChange"
         >
             <template #default>
                 <slot name="default">
                     <el-option
-                        v-if="!options[0]?.label"
-                        v-for="(label, value) in options"
-                        :key="value"
-                        :label="label"
-                        :value="castValue(value)"
-                    >
-                    </el-option>
-                    <el-option
-                        v-else
-                        v-for="option in options"
-                        :key="option.value"
-                        :label="option.label"
+                        v-for="option in currentOptions"
+                        :key="option[effectiveValueKey]"
+                        :label="option[labelKey]"
                         :disabled="option.disabled"
-                        :value="castValue(option.value)"
+                        :value="option"
                     >
                     </el-option>
                 </slot>
             </template>
+            <template v-if="endpoint" #loading>
+                <div class="el-select-dropdown__loading">Loading...</div>
+            </template>
+            <template #label="{ value }">
+                {{ value[labelKey] || value }}
+            </template>
         </el-select>
     </XInput>
 </template>
@@ -47,12 +51,21 @@
 <script>
 import { ElSelect } from "element-plus";
 import { ElOption } from "element-plus";
+import { ElNotification } from "element-plus";
 import input from "./input.js";
 import XInput from "./input.vue";
 import _ from "lodash";
+import axios from "axios";
 
 export default {
+    components: {
+        XInput,
+        ElOption,
+        ElSelect,
+    },
+
     mixins: [input],
+
     props: {
         ...input.props,
         modelValue: {
@@ -77,32 +90,209 @@ export default {
         },
         options: {
             type: Array,
-            default: [],
+            default: () => [],
         },
         multiple: {
             type: Boolean,
             default: false,
         },
+        endpoint: {
+            type: String,
+            default: null,
+        },
+        params: {
+            type: Object,
+            default: () => ({}),
+        },
+        labelKey: {
+            type: String,
+            default: "label",
+        },
+        valueKey: {
+            type: String,
+            default: null,
+        },
+        searchParam: {
+            type: String,
+            default: "name",
+        },
+        perPage: {
+            type: Number,
+            default: 10,
+        },
     },
 
-    components: {
-        XInput,
-        ElOption,
-        ElSelect,
+    emits: ["change", "clear", "blur"],
+
+    data() {
+        return {
+            initialLoading: false,
+            loadingMore: false,
+            asyncOptions: [],
+            currentPage: 1,
+            hasMore: false,
+            searchQuery: "",
+            lastSearchQuery: "",
+            initialLoadDone: false,
+            scrollListener: null,
+            wrapScrollTop: 0,
+            wrapScrollLeft: 0,
+        };
+    },
+
+    computed: {
+        currentOptions() {
+            // If endpoint is provided, use async options, otherwise use static options
+            if (this.endpoint) {
+                return this.asyncOptions;
+            }
+            return this.options;
+        },
+        effectiveValueKey() {
+            // If valueKey was explicitly provided, use it
+            if (this.valueKey !== null) {
+                return this.valueKey;
+            }
+            // Otherwise, use "id" for endpoints, "value" for static options
+            return this.endpoint ? "id" : "value";
+        },
+    },
+
+    mounted() {
+        if (this.endpoint && this.$refs.select?.$refs?.scrollbarRef) {
+            const scrollbar = this.$refs.select.$refs.scrollbarRef;
+            const wrapRef = scrollbar.wrapRef;
+
+            this.scrollListener = () => {
+                if (!wrapRef) return;
+
+                const distance = 10;
+                const prevTop = this.wrapScrollTop;
+                const prevLeft = this.wrapScrollLeft;
+
+                this.wrapScrollTop = wrapRef.scrollTop;
+                this.wrapScrollLeft = wrapRef.scrollLeft;
+
+                const arrivedStates = {
+                    bottom:
+                        this.wrapScrollTop + wrapRef.clientHeight >=
+                        wrapRef.scrollHeight - distance,
+                    top: this.wrapScrollTop <= distance && prevTop !== 0,
+                    right:
+                        this.wrapScrollLeft + wrapRef.clientWidth >=
+                            wrapRef.scrollWidth - distance &&
+                        prevLeft !== this.wrapScrollLeft,
+                    left: this.wrapScrollLeft <= distance && prevLeft !== 0,
+                };
+
+                let direction = null;
+                if (prevTop !== this.wrapScrollTop) {
+                    direction = this.wrapScrollTop > prevTop ? "bottom" : "top";
+                }
+                if (prevLeft !== this.wrapScrollLeft) {
+                    direction =
+                        this.wrapScrollLeft > prevLeft ? "right" : "left";
+                }
+
+                if (direction && arrivedStates[direction]) {
+                    this.handleEndReached(direction);
+                }
+            };
+
+            wrapRef.addEventListener("scroll", this.scrollListener);
+        }
+    },
+
+    beforeUnmount() {
+        if (
+            this.scrollListener &&
+            this.$refs.select?.$refs?.scrollbarRef?.wrapRef
+        ) {
+            this.$refs.select.$refs.scrollbarRef.wrapRef.removeEventListener(
+                "scroll",
+                this.scrollListener,
+            );
+        }
     },
 
-    emits: ["change", "clear", "blur"],
     methods: {
-        castValue(value) {
-            if (
-                !_.isNull(value) &&
-                typeof value === "string" &&
-                value !== "" &&
-                !isNaN(Number(value))
-            ) {
-                return parseInt(value);
+        async handleVisibleChange(visible) {
+            // Load data when dropdown is opened for the first time
+            if (visible && this.endpoint && !this.initialLoadDone) {
+                await this.handleSearch("");
+            }
+        },
+
+        async handleSearch(query) {
+            if (!this.endpoint) return;
+
+            // For initial load, allow empty query even if it matches lastSearchQuery
+            if (!this.initialLoadDone || query !== this.lastSearchQuery) {
+                this.searchQuery = query;
+                this.lastSearchQuery = query;
+                this.currentPage = 1;
+                this.asyncOptions = [];
+                await this.fetchOptions(1, query);
+
+                if (!this.initialLoadDone) {
+                    this.initialLoadDone = true;
+                }
+            }
+        },
+
+        handleEndReached(direction) {
+            if (!this.endpoint) return;
+            if (direction !== "bottom") return;
+            if (!this.hasMore || this.loadingMore) return;
+            this.fetchOptions(this.currentPage + 1, this.searchQuery);
+        },
+
+        async fetchOptions(page, searchQuery = "") {
+            const isInitialLoad = page === 1;
+            const loadingKey = isInitialLoad ? "initialLoading" : "loadingMore";
+
+            if (this[loadingKey]) return;
+
+            this[loadingKey] = true;
+
+            try {
+                const requestParams = {
+                    ...this.params,
+                    page,
+                    per_page: this.perPage,
+                };
+
+                // Add search filter if query is provided
+                if (searchQuery) {
+                    requestParams[`filter[${this.searchParam}]`] = searchQuery;
+                }
+
+                const response = await axios.get(this.endpoint, {
+                    params: requestParams,
+                });
+
+                const data = response.data.data || [];
+                const meta = response.data.meta;
+
+                // If it's the first page, replace options, otherwise append
+                if (page === 1) {
+                    this.asyncOptions = data;
+                } else {
+                    this.asyncOptions = [...this.asyncOptions, ...data];
+                }
+
+                this.currentPage = page;
+                this.hasMore = meta && meta.current_page < meta.last_page;
+            } catch (error) {
+                console.error("Error fetching select options:", error);
+                ElNotification.error({
+                    title: "Error",
+                    message: "Failed to load options. Please try again.",
+                    duration: 5000,
+                });
+            } finally {
+                this[loadingKey] = false;
             }
-            return value;
         },
     },
 };