lew-ui 1.0.0

package/components/form/FormItem.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = defineProps({
+    title: {
+        type: String,
+        default: '标题',
+    },
+    direction: {
+        type: String,
+        default: 'x',
+    },
+});
+</script>
+
+<template>
+    <div class="lew-form-item" :class="`lew-form-item-${direction}`">
+        <label class="title-label">{{ props.title }} </label>
+        <slot />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.lew-form-item {
+    width: 100%;
+    margin-bottom: 20px;
+    text-align: left;
+
+    label {
+        display: block;
+        width: 100%;
+        margin: 0px 0px 10px 0px;
+        font-size: 14px;
+        color: var(--text-color);
+    }
+}
+
+.lew-form-item-x {
+    display: flex;
+    align-items: flex-start;
+
+    label {
+        white-space: nowrap;
+        width: auto;
+        margin-top: 8px;
+        padding-right: 10px;
+        display: inline-block;
+    }
+}
+
+.lew-form-item-y {
+}
+</style>

package/components/form/LewCheckbox.vue

@@ -0,0 +1,153 @@
+<template>
+    <label
+        class="lew-checkbox"
+        :class="`${block ? 'lew-checkbox-block' : ''} ${
+            round ? 'lew-checkbox-round' : ''
+        }`"
+    >
+        <div class="icon-checkbox-box" :class="{ 'icon-checked-box': checked }">
+            <svg
+                class="icon-checkbox"
+                :class="{ 'icon-checked': checked }"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"
+                stroke="currentColor"
+                stroke-width="4"
+                fill="none"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+        </div>
+        <input
+            v-show="false"
+            type="checkbox"
+            :checked="checked"
+            @input="setChecked"
+        />
+        {{ label }}
+    </label>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+    label: {
+        type: String,
+        required: true,
+    },
+    block: {
+        type: Boolean,
+        default: () => {
+            return false;
+        },
+    },
+    round: {
+        type: Boolean,
+        default: () => {
+            return false;
+        },
+    },
+    checked: {
+        type: Boolean,
+    },
+});
+
+const emit = defineEmits(['update:checked']);
+
+const setChecked = (event: Event) => {
+    emit('update:checked', (event.target as HTMLInputElement).checked);
+};
+</script>
+
+<style lang="scss" scoped>
+.lew-checkbox {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    margin: 0px 20px 15px 0px;
+    cursor: pointer;
+    color: var(--text-color);
+    font-size: 14px;
+    transition: all 0.25s ease;
+    .icon-checkbox-box {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        border: 2px rgba($color: #000000, $alpha: 0.1) solid;
+        box-sizing: border-box;
+        border-radius: 5px;
+        margin-right: 5px;
+        transition: all 0.25s ease;
+
+        .icon-checkbox {
+            transform: scale(0.6) translateY(50%);
+            transition: all 0.25s ease;
+            opacity: 0;
+            color: #fff;
+            font-size: 12px;
+        }
+    }
+
+    .icon-checked-box {
+        border: 2px var(--primary-color) solid;
+        background: var(--primary-color);
+
+        .icon-checkbox {
+            transform: scale(0.85) translateY(0px);
+            opacity: 1;
+        }
+    }
+}
+
+.lew-checkbox:hover {
+    .icon-checkbox-box {
+        border: 2px rgba($color: #000000, $alpha: 0.2) solid;
+    }
+
+    .icon-checked-box {
+        border: 2px var(--primary-color) solid;
+        background: var(--primary-color);
+    }
+}
+
+.lew-checkbox-block {
+    background: var(--form-bgcolor);
+    padding: 4px 8px 4px 6px;
+    border: var(--form-border);
+    border-radius: 8px;
+    .icon-checkbox-box {
+        border: 2px rgba(0, 0, 0, 0) solid;
+        background: var(--form-bgcolor-hover);
+    }
+    .icon-checked-box {
+        border: 2px var(--primary-color) solid;
+        background: var(--primary-color);
+    }
+}
+.lew-checkbox-block:hover {
+    .icon-checkbox-box {
+        border: 2px rgba(0, 0, 0, 0) solid;
+    }
+}
+
+.lew-checkbox-round {
+    border-radius: 50px;
+    .icon-checkbox-box {
+        border-radius: 50%;
+    }
+}
+
+.lew-checkbox-block:hover {
+    background: var(--form-bgcolor-hover);
+    border: var(--form-border-hover);
+}
+
+.lew-checkbox-block:active {
+    background: var(--form-bgcolor-active);
+    border: var(--form-border-active);
+}
+</style>

package/components/form/LewCheckboxGroup.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="lew-checkbox-group" :class="`lew-checkbox-group-${direction}`">
+        <lew-checkbox
+            v-for="option in options"
+            :key="option.id"
+            :block="block"
+            :round="round"
+            :label="option.name"
+            :checked="getChecked(option.id)"
+            @update:checked="check(option.id, $event)"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { LewCheckbox } from '@/packages/lew';
+type Options = {
+    name: string;
+    id: string | number;
+};
+const props = defineProps({
+    modelValue: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+        required: true,
+    },
+    block: {
+        type: Boolean,
+        default: () => {
+            return false;
+        },
+    },
+    round: {
+        type: Boolean,
+        default: () => {
+            return false;
+        },
+    },
+    direction: {
+        type: String,
+        default: 'x',
+    },
+    options: {
+        type: Array as PropType<Options[]>,
+        default: () => {
+            return [];
+        },
+        required: true,
+        validator: (value: Array<number>) => {
+            const hasNameKey = value.every((option) =>
+                Object.keys(option).includes('name'),
+            );
+            const hasIdKey = value.every((option) =>
+                Object.keys(option).includes('id'),
+            );
+            return hasNameKey && hasIdKey;
+        },
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const check = (optionId: number | string, checked: boolean) => {
+    let updatedValue = [...props.modelValue];
+    optionId = Number(optionId);
+
+    if (checked) {
+        updatedValue.push(optionId);
+    } else {
+        updatedValue.splice(updatedValue.indexOf(optionId), 1);
+    }
+    emit('update:modelValue', updatedValue);
+};
+
+const getChecked = (optionId: string | number) => {
+    optionId = Number(optionId);
+    return props.modelValue.includes(optionId);
+};
+</script>
+<style lang="scss" scoped>
+.lew-checkbox-group {
+    display: flex;
+    align-items: center;
+    font-size: 0px;
+    flex-wrap: wrap;
+}
+
+.lew-checkbox-group.lew-checkbox-group-x {
+    flex-direction: row;
+}
+
+.lew-checkbox-group.lew-checkbox-group-y {
+    align-items: flex-start;
+    flex-direction: column;
+}
+</style>

package/components/form/LewInput.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+const props = defineProps({
+    modelValue: {
+        // 父组件 v-model 没有指定参数名，则默认是 modelValue
+        type: String,
+        default: '',
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+});
+const v = ref(props.modelValue);
+watch(
+    () => props.modelValue,
+    () => {
+        v.value = props.modelValue;
+    },
+);
+const emit = defineEmits(['update:modelValue']);
+
+const input = (e: any) => {
+    let value = e.target.value;
+    emit('update:modelValue', value);
+};
+</script>
+
+<template>
+    <input
+        v-model="v"
+        class="lew-input"
+        :disabled="props.disabled"
+        placeholder="请输入"
+        @input="input"
+    />
+</template>
+
+<style lang="scss" scoped>
+.lew-input {
+    width: 100%;
+    height: 35px;
+    padding: 5px 12px;
+    font-size: 14px;
+    line-height: 24px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    border: var(--form-border);
+    border-radius: var(--form-border-radius);
+    background-color: var(--form-bgcolor);
+    color: var(--form-text-color);
+    box-sizing: border-box;
+    transition: all 0.25s ease;
+    outline: none;
+}
+.lew-input::placeholder {
+    color: rgb(165, 165, 165);
+}
+.lew-input:hover {
+    border: var(--form-border-hover);
+    background-color: var(--form-bgcolor-hover);
+}
+
+.lew-input:active {
+    background-color: var(--form-bgcolor-active);
+}
+
+.lew-input:focus {
+    background-color: var(--form-bgcolor-focus);
+    border: var(--form-border-focus);
+}
+</style>

package/components/form/LewRadio.vue

@@ -0,0 +1,126 @@
+<template>
+    <label class="lew-radio" :class="`${block ? 'lew-radio-block' : ''} `">
+        <div class="icon-radio-box" :class="{ 'icon-checked-box': checked }">
+            <div class="icon-radio"></div>
+        </div>
+        <input
+            v-show="false"
+            type="radio"
+            :checked="checked"
+            @input="setChecked"
+        />
+        {{ label }}
+    </label>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+    label: {
+        type: String,
+        required: true,
+    },
+    block: {
+        type: Boolean,
+        default: () => {
+            return false;
+        },
+    },
+
+    checked: {
+        type: Boolean,
+    },
+});
+
+const emit = defineEmits(['update:checked']);
+
+const setChecked = () => {
+    emit('update:checked');
+};
+</script>
+
+<style lang="scss" scoped>
+.lew-radio {
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    margin: 0px 20px 15px 0px;
+    cursor: pointer;
+    color: var(--text-color);
+    font-size: 14px;
+    border-radius: 50px;
+    .icon-radio-box {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        border: 2px rgba($color: #000000, $alpha: 0.1) solid;
+        box-sizing: border-box;
+        margin-right: 5px;
+        transition: all 0.25s ease;
+        overflow: hidden;
+        border-radius: 50px;
+        .icon-radio {
+            width: 7px;
+            height: 7px;
+            background-color: #fff;
+            transform: translateY(100%);
+            opacity: 0;
+            border-radius: 2px;
+            transition: all 0.25s ease;
+            font-size: 12px;
+            border-radius: 50px;
+        }
+    }
+
+    .icon-checked-box {
+        border: 2px var(--primary-color) solid;
+        background: var(--primary-color);
+
+        .icon-radio {
+            transform: translateY(0%);
+            opacity: 1;
+        }
+    }
+}
+
+.lew-radio:hover {
+    .icon-radio-box {
+        border: 2px rgba($color: #000000, $alpha: 0.2) solid;
+    }
+
+    .icon-checked-box {
+        border: 2px var(--primary-color) solid;
+        background: var(--primary-color);
+    }
+}
+
+.lew-radio-block {
+    background: var(--form-bgcolor);
+    padding: 4px 8px 4px 6px;
+    border: var(--form-border);
+    border-radius: 30px;
+    .icon-radio-box {
+        border: 2px rgba(0, 0, 0, 0) solid;
+        background: var(--form-bgcolor-hover);
+    }
+    .icon-checked-box {
+        border: 2px var(--primary-color) solid;
+        background: var(--primary-color);
+    }
+}
+.lew-radio-block:hover {
+    .icon-radio-box {
+        border: 2px rgba(0, 0, 0, 0) solid;
+    }
+}
+.lew-radio-block:hover {
+    background: var(--form-bgcolor-hover);
+    border: var(--form-border-hover);
+}
+
+.lew-radio-block:active {
+    background: var(--form-bgcolor-active);
+    border: var(--form-border-active);
+}
+</style>

package/components/form/LewRadioGroup.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="lew-radio-group" :class="`lew-radio-group-${direction}`">
+        <lew-radio
+            v-for="option in options"
+            :key="option.id"
+            :block="block"
+            :label="option.name"
+            :checked="modelValue == option.id"
+            @update:checked="check(option.id)"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { LewRadio } from '@/packages/lew';
+type Options = {
+    name: string;
+    id: string | number;
+};
+defineProps({
+    modelValue: {
+        type: Number,
+        default: () => {
+            return 0;
+        },
+        required: true,
+    },
+    block: {
+        type: Boolean,
+        default: () => {
+            return false;
+        },
+    },
+
+    direction: {
+        type: String,
+        default: 'x',
+    },
+    options: {
+        type: Array as PropType<Options[]>,
+        default: () => {
+            return [];
+        },
+        required: true,
+        validator: (value: Array<number>) => {
+            const hasNameKey = value.every((option) =>
+                Object.keys(option).includes('name'),
+            );
+            const hasIdKey = value.every((option) =>
+                Object.keys(option).includes('id'),
+            );
+            return hasNameKey && hasIdKey;
+        },
+    },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const check = (optionId: number | string) => {
+    emit('update:modelValue', Number(optionId));
+};
+</script>
+
+<style lang="scss" scoped>
+.lew-radio-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    font-size: 0px;
+}
+
+.lew-radio-group.lew-radio-group-x {
+    flex-direction: row;
+}
+
+.lew-radio-group.lew-radio-group-y {
+    flex-direction: column;
+    align-items: start;
+    justify-content: flex-start;
+}
+</style>