@fishawack/lab-velocity 2.0.0-beta.1 → 2.0.0-beta.3

package/_Build/vue/components/Icon.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="vel-icon">
+        <VSvg v-bind="$props" />
+    </div>
+</template>
+
+<script>
+import VSvg from "./Svg.vue";
+
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        embed: {
+            type: Boolean,
+            default: false,
+        },
+        asis: {
+            type: Boolean,
+            default: false,
+        },
+        artboard: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    components: {
+        VSvg,
+    },
+};
+</script>

package/_Build/vue/components/Svg.vue

@@ -0,0 +1,45 @@
+<template>
+    <div v-if="embed">
+        <component v-if="embed" :is="icon" class="vel-svg" />
+    </div>
+    <svg v-else class="vel-svg">
+        <use :xlink:href="'#' + name" />
+    </svg>
+</template>
+
+<script>
+import { defineAsyncComponent } from "vue";
+export default {
+    props: {
+        name: {
+            type: String,
+            required: true,
+        },
+        embed: {
+            type: Boolean,
+            default: false,
+        },
+        asis: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            icons: import.meta.glob(
+                `../../handlebars/generated/embed/**/*.svg`,
+                { query: "?component" },
+            ),
+        };
+    },
+    computed: {
+        icon() {
+            return defineAsyncComponent(() =>
+                this.icons[
+                    `../../handlebars/generated/embed/svg${this.asis ? "--asis" : ""}--${this.name}.svg`
+                ](),
+            );
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,109 @@
+<template>
+    <el-button
+        :class="[`vel-button ${baseClass}__button`]"
+        :name="name"
+        :id="name"
+        :disabled="disabled"
+        :round="round"
+        :circle="circle"
+        :size="size"
+        :text="text"
+        :tag="tag"
+        :autofocus="autofocus"
+        :native-type="nativeType"
+        :type="type"
+        :link="link"
+        :plain="plain"
+        :loading="loading"
+        :customIcon="customIcon"
+        :href="href"
+        :target="target"
+    >
+        <slot />
+    </el-button>
+</template>
+
+<script>
+import { ElButton } from "element-plus";
+
+export default {
+    props: {
+        baseClass: {
+            type: String,
+            default: "vel-button",
+        },
+        type: {
+            type: String,
+            default: null,
+        },
+        name: {
+            type: String,
+            default: null,
+        },
+        nativeType: {
+            type: String,
+            default: "button",
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        round: {
+            type: Boolean,
+            default: false,
+        },
+        circle: {
+            type: Boolean,
+            default: false,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        autofocus: {
+            type: Boolean,
+            default: false,
+        },
+        text: {
+            type: Boolean,
+            default: false,
+        },
+        link: {
+            type: Boolean,
+            default: false,
+        },
+        plain: {
+            type: Boolean,
+            default: false,
+        },
+        tag: {
+            type: String,
+            default: "button",
+        },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        customIcon: {
+            type: String,
+            default: null,
+        },
+        iconClasses: {
+            type: String,
+            default: "",
+        },
+        href: {
+            type: String,
+            default: null,
+        },
+        target: {
+            type: String,
+            default: null,
+        },
+    },
+
+    components: {
+        ElButton,
+    },
+};
+</script>

package/_Build/vue/components/basic/link.vue

@@ -0,0 +1,64 @@
+<template>
+    <el-link
+        :class="[
+            `link ${baseClass} vel-link--${size} ${underline ? 'vel-link--underline' : ''}`,
+        ]"
+        :name="name"
+        :underline="underline"
+        :id="name"
+        :disabled="disabled"
+        :href="href"
+        :target="target"
+    >
+        <slot />
+    </el-link>
+</template>
+
+<script>
+import { ElLink } from "element-plus";
+
+export default {
+    props: {
+        baseClass: {
+            type: String,
+            default: "vel-link",
+        },
+        type: {
+            type: String,
+            default: null,
+        },
+        underline: {
+            type: Boolean,
+            default: true,
+        },
+        href: {
+            type: String,
+            default: null,
+        },
+        target: {
+            type: String,
+            default: null,
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        name: {
+            type: String,
+            default: null,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        autofocus: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    components: {
+        ElLink,
+    },
+};
+</script>

package/_Build/vue/components/form/Cascader.vue

@@ -0,0 +1,85 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+        <el-cascader
+            class="block"
+            v-model="content"
+            :options="options"
+            :placeholder="placeholder"
+            :clearable="clearable"
+            :show-all-levels="showAllLevels"
+            :props="{
+                multiple: multiple,
+                checkStrictly: checkStrictly,
+            }"
+        />
+    </XInput>
+</template>
+
+<script>
+import { ElCascader } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        baseClass: {
+            type: String,
+            default: "vel-cascader",
+        },
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        checkStrictly: {
+            type: Boolean,
+            default: false,
+        },
+        clearable: {
+            type: Boolean,
+            default: false,
+        },
+        showAllLevels: {
+            type: Boolean,
+            default: false,
+        },
+        options: {
+            type: Array,
+            default: [],
+        },
+        ...input.props,
+    },
+    components: {
+        XInput,
+        ElCascader,
+    },
+
+    emits: ["change", "clear", "blur"],
+    methods: {
+        castValue(value) {
+            if (
+                !_.isNull(value) &&
+                typeof value === "string" &&
+                !isNaN(Number(value))
+            ) {
+                return parseInt(value);
+            }
+            return value;
+        },
+        handleInput(value, $event) {
+            this.$emit("change", value);
+        },
+    },
+
+    data() {
+        return {
+            pr: {
+                multiple: true,
+            },
+        };
+    },
+};
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+    <XInput v-bind="$props">
+        <el-checkbox
+            :class="[`${baseClass}__checkbox`]"
+            :id="name"
+            :disabled="disabled"
+            v-model="content"
+            :required="required"
+            @change="handleInput"
+        >
+        </el-checkbox>
+    </XInput>
+</template>
+
+<script>
+import { ElCheckbox } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        modelValue: {
+            type: Boolean,
+            default: null,
+        },
+        baseClass: {
+            type: String,
+            default: "vel-checkbox",
+        },
+    },
+
+    components: {
+        XInput,
+        ElCheckbox,
+    },
+};
+</script>

package/_Build/vue/components/form/CheckboxGroup.vue

@@ -0,0 +1,91 @@
+<template>
+    <XInput v-bind="$props">
+        <el-checkbox-group
+            :class="[`${baseClass}__wrapper`]"
+            :id="name"
+            :disabled="disabled"
+            :size="size"
+            :min="min"
+            :max="max"
+            v-model="content"
+            :required="required"
+            @change="handleInput"
+            :checkboxButton="checkboxButton"
+        >
+            <el-checkbox
+                v-if="!checkboxButton"
+                :key="index"
+                v-for="({ label, value, disabled }, index) in options"
+                :label="label"
+                :value="value"
+                :disabled="disabled"
+            >
+                <slot name="label" :label="label" :value="value">
+                    <span v-html="label"></span>
+                </slot>
+            </el-checkbox>
+            <el-checkbox-button
+                v-else
+                :key="indexB"
+                v-for="({ label, value, disabled }, indexB) in options"
+                :label="label"
+                :value="value"
+                :disabled="disabled"
+            >
+                <slot name="label" :label="label" :value="value">
+                    <span v-html="label"></span>
+                </slot>
+            </el-checkbox-button>
+        </el-checkbox-group>
+    </XInput>
+</template>
+
+<script>
+import { ElCheckbox } from "element-plus";
+import { ElCheckboxButton } from "element-plus";
+import { ElCheckboxGroup } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        modelValue: {
+            type: Array,
+            default: [],
+        },
+        baseClass: {
+            type: String,
+            default: "vel-checkbox-group",
+        },
+        checkboxButton: {
+            type: Boolean,
+            default: false,
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        min: {
+            type: Number,
+            default: 0,
+        },
+        max: {
+            type: Number,
+            default: 100,
+        },
+        options: {
+            type: Array,
+            default: [],
+        },
+    },
+
+    components: {
+        XInput,
+        ElCheckbox,
+        ElCheckboxButton,
+        ElCheckboxGroup,
+    },
+};
+</script>

package/_Build/vue/components/form/DatePicker.vue

@@ -0,0 +1,116 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-date-picker
+            v-bind="$attrs.props"
+            :type="type"
+            :disabled="disabled"
+            :disabled-date="disabledDate"
+            -
+            :placeholder="placeholder"
+            :shortcuts="shortcuts"
+            :size="size"
+            class="w-100 vel-datepicker"
+            v-model="content"
+            @change="handleInput"
+            :value-format="valueFormat"
+            :date-format="dateFormat"
+            :time-format="timeFormat"
+            :format="format"
+            :popper-class="popperClass"
+            :prefix-icon="prefixIcon"
+        />
+    </XInput>
+</template>
+<script>
+import dayjs from "dayjs";
+import { ElDatePicker } from "element-plus";
+
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        type: {
+            type: String,
+            validator: (value) =>
+                [
+                    "date",
+                    "year",
+                    "years",
+                    "month",
+                    "months",
+                    "date",
+                    "dates",
+                    "datetime",
+                    "week",
+                    "datetimerange",
+                    "daterange",
+                    "monthrange",
+                    "yearrange",
+                ].includes(value),
+            default: "date",
+        },
+        format: {
+            type: String,
+        },
+        valueFormat: {
+            type: String,
+        },
+        dateFormat: {
+            type: String,
+        },
+        timeFormat: {
+            type: String,
+        },
+        baseClass: {
+            type: String,
+            default: "vel-datepicker",
+        },
+        minDate: {
+            type: [Date, String],
+        },
+        maxDate: {
+            type: [Date, String],
+        },
+        shortcuts: {
+            type: Array,
+            default: [],
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        popperClass: {
+            type: String,
+            default: "vel-popper",
+        },
+        prefixIcon: {
+            type: String,
+        },
+    },
+    components: {
+        XInput,
+        ElDatePicker,
+    },
+
+    methods: {
+        disabledDate(date) {
+            if (this.minDate && dayjs(date).isBefore(this.minDate)) {
+                return true;
+            }
+
+            if (this.maxDate && dayjs(date).isAfter(this.maxDate)) {
+                return true;
+            }
+
+            return false;
+        },
+    },
+};
+</script>

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

@@ -0,0 +1,89 @@
+<template>
+    <XInput v-bind="$props">
+        <template #label>
+            <slot name="label" />
+        </template>
+
+        <el-input-number
+            v-bind="{ ...$attrs, class: undefined }"
+            :class="[`${baseClass}`]"
+            :name="name"
+            :id="name"
+            :disabled="disabled"
+            :min="min"
+            :max="max"
+            :size="size"
+            :precision="precision"
+            :step="step"
+            :controls="controls"
+            :step-strictly="stepStrictly"
+            :placeholder="placeholder"
+            v-model="content"
+            :required="required"
+            @input="handleInput"
+        >
+            <template #prefix>
+                <slot name="prefix" />
+            </template>
+            <template #suffix>
+                <slot name="suffix" />
+            </template>
+            <template #decrease-icon>
+                <slot name="decrease-icon" />
+            </template>
+            <template #increase-icon>
+                <slot name="increase-icon" />
+            </template>
+        </el-input-number>
+    </XInput>
+</template>
+
+<script>
+import { ElInputNumber } from "element-plus";
+import input from "./input.js";
+import XInput from "./input.vue";
+
+export default {
+    mixins: [input],
+    props: {
+        ...input.props,
+        baseClass: {
+            type: String,
+            default: "vel-input-number",
+        },
+        min: {
+            type: Number,
+            default: -Infinity,
+        },
+        max: {
+            type: Number,
+            default: Infinity,
+        },
+        precision: {
+            type: Number,
+            default: null,
+        },
+        step: {
+            type: Number,
+            default: 1,
+        },
+        stepStrictly: {
+            type: Boolean,
+            default: true,
+        },
+        size: {
+            type: String,
+            default: "default",
+        },
+        controls: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    components: {
+        XInput,
+        ElInputNumber,
+    },
+};
+</script>