@scx-js/scx-ui 0.0.1 → 0.0.2

package/scx-group/index.css

@@ -1,66 +1,66 @@
-.scx-group {
-    position: relative;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px;
-    /* 特有 css */
-    display: flex;
-    flex-direction: column;
-    row-gap: 10px;
-    align-items: center;
-}
-
-.scx-group-item {
-    position: relative;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 10px;
-    /* 特有 css */
-    border: 1px dashed var(--scx-text-placeholder-color);
-    background-color: var(--scx-theme-bg);
-    transition: transform 600ms ease, opacity 600ms ease;
-}
-
-.scx-group-item-operation {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-}
-
-.scx-group-item-move-up-button {
-    /* 占位用 方便开发者覆盖 css */
-}
-
-.scx-group-item-move-down-button {
-    /* 占位用 方便开发者覆盖 css */
-}
-
-.scx-group-item-remove-button {
-    /* 占位用 方便开发者覆盖 css */
-}
-
-/*简单设置一下 默认占位按钮的样式*/
-.scx-group-item-operation .placeholder-button {
-    display: flex;
-    height: 22px;
-    width: 22px;
-    justify-content: center;
-    align-items: center;
-}
-
-/*以下为 vue 动画*/
-.scx-group-list-enter-from {
-    opacity: 0;
-    transform: scale(0.98);
-}
-
-.scx-group-list-leave-to {
-    opacity: 0;
-    transform: scale(0.98);
-}
-
-/* 重要 !!!!!  避免嵌套动画延迟 */
-.scx-group-list-move .scx-group-list-move {
-    transition: unset;
+.scx-group {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    /* 特有 css */
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    align-items: center;
+}
+
+.scx-group-item {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    /* 特有 css */
+    border: 1px dashed var(--scx-text-placeholder-color);
+    background-color: var(--scx-theme-bg);
+    transition: transform 600ms ease, opacity 600ms ease;
+}
+
+.scx-group-item-operation {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+}
+
+.scx-group-item-move-up-button {
+    /* 占位用 方便开发者覆盖 css */
+}
+
+.scx-group-item-move-down-button {
+    /* 占位用 方便开发者覆盖 css */
+}
+
+.scx-group-item-remove-button {
+    /* 占位用 方便开发者覆盖 css */
+}
+
+/*简单设置一下 默认占位按钮的样式*/
+.scx-group-item-operation .placeholder-button {
+    display: flex;
+    height: 22px;
+    width: 22px;
+    justify-content: center;
+    align-items: center;
+}
+
+/*以下为 vue 动画*/
+.scx-group-list-enter-from {
+    opacity: 0;
+    transform: scale(0.98);
+}
+
+.scx-group-list-leave-to {
+    opacity: 0;
+    transform: scale(0.98);
+}
+
+/* 重要 !!!!!  避免嵌套动画延迟 */
+.scx-group-list-move .scx-group-list-move {
+    transition: unset;
 }

package/scx-group/index.vue

@@ -1,154 +1,154 @@
-<template>
-    <div class="scx-group">
-        <slot name="before"></slot>
-        <transition-group name="scx-group-list" @before-leave="fixedElement">
-            <div v-for="(item,i) in list" :key="item" class="scx-group-item">
-                <slot :index="i" :item="item"></slot>
-                <div class="scx-group-item-operation">
-                    <slot :index="i" :item="item" name="itemOperation"></slot>
-                    <div v-if="showMoveUp(i)" class="scx-group-item-move-up-button" @click="groupItemMoveUp(i)">
-                        <slot name="moveUpButton">
-                            <button class="placeholder-button" type="button">↑</button>
-                        </slot>
-                    </div>
-                    <div v-if="showMoveDown(i)" class="scx-group-item-move-down-button" @click="groupItemMoveDown(i)">
-                        <slot name="moveDownButton">
-                            <button class="placeholder-button" type="button">↓</button>
-                        </slot>
-                    </div>
-                    <div v-if="showRemoveButton" class="scx-group-item-remove-button" @click="groupItemRemove(i)">
-                        <slot name="removeButton">
-                            <button class="placeholder-button" type="button">X</button>
-                        </slot>
-                    </div>
-                </div>
-            </div>
-        </transition-group>
-        <slot name="after"></slot>
-    </div>
-</template>
-
-<script>
-import "./index.css";
-import {computed} from "vue";
-import {fixedElement, moveDownByIndex, moveUpByIndex, removeByIndex} from "../../scx-common/index.js";
-
-export default {
-    name: "scx-group",
-    props: {
-        modelValue: {
-            type: Array,
-            required: true,
-            default: [],
-        },
-        beforeRemove: {
-            type: Function,
-            default: null
-        },
-        beforeMoveUp: {
-            type: Function,
-            default: null
-        },
-        beforeMoveDown: {
-            type: Function,
-            default: null
-        },
-        loop: {
-            type: Boolean,
-            default: true
-        },
-        showRemoveButton: {
-            type: Boolean,
-            default: true
-        },
-        showMoveButton: {
-            type: Boolean,
-            default: true
-        }
-    },
-    setup(props, ctx) {
-
-        if (!props.modelValue) {
-            ctx.emit("update:modelValue", []);
-        }
-
-        const list = computed({
-            get() {
-                return props.modelValue;
-            },
-            set(value) {
-                ctx.emit("update:modelValue", value);
-            }
-        });
-
-        async function groupItemRemove(index) {
-            if (props.beforeRemove) {
-                //如果返回值是 false 则不添加
-                const result = await props.beforeRemove(list.value[index]);
-                if (!result) {
-                    return;
-                }
-            }
-            removeByIndex(list.value, index);
-        }
-
-        async function groupItemMoveUp(index) {
-            if (props.beforeMoveUp) {
-                //如果返回值是 false 则不添加
-                const result = await props.beforeMoveUp(index);
-                if (!result) {
-                    return;
-                }
-            }
-            moveUpByIndex(list.value, index, props.loop);
-        }
-
-        async function groupItemMoveDown(index) {
-            if (props.beforeMoveDown) {
-                //如果返回值是 false 则不添加
-                const result = await props.beforeMoveDown(index);
-                if (!result) {
-                    return;
-                }
-            }
-            moveDownByIndex(list.value, index, props.loop);
-        }
-
-        function showMoveUp(i) {
-            if (!props.showMoveButton) {
-                return false;
-            }
-            const minIndex = 0;
-            //数据量小的时候没必要显示
-            if (list.value.length <= 2 && i === minIndex) {
-                return false;
-            } else {//数据量大的时候 如果没启用循环 第一项不显示
-                return props.loop ? true : i !== minIndex;
-            }
-        }
-
-        function showMoveDown(i) {
-            if (!props.showMoveButton) {
-                return false;
-            }
-            const maxIndex = list.value.length - 1;
-            //数据量小的时候没必要显示
-            if (list.value.length <= 2 && i === maxIndex) {
-                return false;
-            } else { //数据量大的时候 如果没启用循环 最后一项不显示
-                return props.loop ? true : i !== maxIndex;
-            }
-        }
-
-        return {
-            list,
-            groupItemRemove,
-            fixedElement,
-            groupItemMoveUp,
-            groupItemMoveDown,
-            showMoveUp,
-            showMoveDown
-        };
-    }
-};
-</script>
+<template>
+    <div class="scx-group">
+        <slot name="before"></slot>
+        <transition-group name="scx-group-list" @before-leave="fixedElement">
+            <div v-for="(item,i) in list" :key="item" class="scx-group-item">
+                <slot :index="i" :item="item"></slot>
+                <div class="scx-group-item-operation">
+                    <slot :index="i" :item="item" name="itemOperation"></slot>
+                    <div v-if="showMoveUp(i)" class="scx-group-item-move-up-button" @click="groupItemMoveUp(i)">
+                        <slot name="moveUpButton">
+                            <button class="placeholder-button" type="button">↑</button>
+                        </slot>
+                    </div>
+                    <div v-if="showMoveDown(i)" class="scx-group-item-move-down-button" @click="groupItemMoveDown(i)">
+                        <slot name="moveDownButton">
+                            <button class="placeholder-button" type="button">↓</button>
+                        </slot>
+                    </div>
+                    <div v-if="showRemoveButton" class="scx-group-item-remove-button" @click="groupItemRemove(i)">
+                        <slot name="removeButton">
+                            <button class="placeholder-button" type="button">X</button>
+                        </slot>
+                    </div>
+                </div>
+            </div>
+        </transition-group>
+        <slot name="after"></slot>
+    </div>
+</template>
+
+<script>
+import "./index.css";
+import {computed} from "vue";
+import {fixedElement, moveDownByIndex, moveUpByIndex, removeByIndex} from "../../scx-common/index.js";
+
+export default {
+    name: "scx-group",
+    props: {
+        modelValue: {
+            type: Array,
+            required: true,
+            default: [],
+        },
+        beforeRemove: {
+            type: Function,
+            default: null
+        },
+        beforeMoveUp: {
+            type: Function,
+            default: null
+        },
+        beforeMoveDown: {
+            type: Function,
+            default: null
+        },
+        loop: {
+            type: Boolean,
+            default: true
+        },
+        showRemoveButton: {
+            type: Boolean,
+            default: true
+        },
+        showMoveButton: {
+            type: Boolean,
+            default: true
+        }
+    },
+    setup(props, ctx) {
+
+        if (!props.modelValue) {
+            ctx.emit("update:modelValue", []);
+        }
+
+        const list = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                ctx.emit("update:modelValue", value);
+            }
+        });
+
+        async function groupItemRemove(index) {
+            if (props.beforeRemove) {
+                //如果返回值是 false 则不添加
+                const result = await props.beforeRemove(list.value[index]);
+                if (!result) {
+                    return;
+                }
+            }
+            removeByIndex(list.value, index);
+        }
+
+        async function groupItemMoveUp(index) {
+            if (props.beforeMoveUp) {
+                //如果返回值是 false 则不添加
+                const result = await props.beforeMoveUp(index);
+                if (!result) {
+                    return;
+                }
+            }
+            moveUpByIndex(list.value, index, props.loop);
+        }
+
+        async function groupItemMoveDown(index) {
+            if (props.beforeMoveDown) {
+                //如果返回值是 false 则不添加
+                const result = await props.beforeMoveDown(index);
+                if (!result) {
+                    return;
+                }
+            }
+            moveDownByIndex(list.value, index, props.loop);
+        }
+
+        function showMoveUp(i) {
+            if (!props.showMoveButton) {
+                return false;
+            }
+            const minIndex = 0;
+            //数据量小的时候没必要显示
+            if (list.value.length <= 2 && i === minIndex) {
+                return false;
+            } else {//数据量大的时候 如果没启用循环 第一项不显示
+                return props.loop ? true : i !== minIndex;
+            }
+        }
+
+        function showMoveDown(i) {
+            if (!props.showMoveButton) {
+                return false;
+            }
+            const maxIndex = list.value.length - 1;
+            //数据量小的时候没必要显示
+            if (list.value.length <= 2 && i === maxIndex) {
+                return false;
+            } else { //数据量大的时候 如果没启用循环 最后一项不显示
+                return props.loop ? true : i !== maxIndex;
+            }
+        }
+
+        return {
+            list,
+            groupItemRemove,
+            fixedElement,
+            groupItemMoveUp,
+            groupItemMoveDown,
+            showMoveUp,
+            showMoveDown
+        };
+    }
+};
+</script>

package/scx-icon/index.css

@@ -1,4 +1,4 @@
-.scx-icon {
-    width: 1em;
-    height: 1em;
+.scx-icon {
+    width: 1em;
+    height: 1em;
 }

package/scx-icon/index.vue

@@ -1,20 +1,20 @@
-<template>
-    <svg class="scx-icon">
-        <use :href="'#scx-icon_' + icon"></use>
-    </svg>
-</template>
-
-<script>
-import "./index.css";
-
-export default {
-    name: "scx-icon",
-    props: {
-        icon: {
-            type: String,
-            default: "",
-            required: true
-        }
-    }
-};
-</script>
+<template>
+    <svg class="scx-icon">
+        <use :href="'#scx-icon_' + icon"></use>
+    </svg>
+</template>
+
+<script>
+import "./index.css";
+
+export default {
+    name: "scx-icon",
+    props: {
+        icon: {
+            type: String,
+            default: "",
+            required: true
+        }
+    }
+};
+</script>

package/scx-input/index.css

@@ -1,39 +1,39 @@
-.scx-input {
-    display: flex;
-    justify-content: space-between;
-    align-self: center;
-    align-items: center;
-    /* 32px 是当前这个元素的高度 默认被内部的 input 撑起来的高度*/
-    border-radius: calc(32px / 2);
-    background: var(--scx-input_bg);
-    box-shadow: var(--scx-input_box-shadow);
-    transition: all 100ms cubic-bezier(0.23, 1, 0.32, 1);
-    padding-left: 10px;
-    padding-right: 10px;
-    box-sizing: border-box;
-}
-
-.scx-input > input {
-    width: 100%;
-    outline: none;
-    font-size: 15px;
-    height: 30px;
-    border: 0;
-    background-color: transparent;
-    margin-left: 10px;
-    margin-right: 10px;
-}
-
-.scx-input > input::placeholder {
-    color: var(--scx-text-placeholder-color);
-}
-
-.scx-input > svg {
-    width: 20px;
-    flex-shrink: 0;
-    cursor: pointer;
-}
-
-.scx-input:focus-within {
-    box-shadow: var(--scx-input-hover_box-shadow);
-}
+.scx-input {
+    display: flex;
+    justify-content: space-between;
+    align-self: center;
+    align-items: center;
+    /* 32px 是当前这个元素的高度 默认被内部的 input 撑起来的高度*/
+    border-radius: calc(32px / 2);
+    background: var(--scx-input_bg);
+    box-shadow: var(--scx-input_box-shadow);
+    transition: all 100ms cubic-bezier(0.23, 1, 0.32, 1);
+    padding-left: 10px;
+    padding-right: 10px;
+    box-sizing: border-box;
+}
+
+.scx-input > input {
+    width: 100%;
+    outline: none;
+    font-size: 15px;
+    height: 30px;
+    border: 0;
+    background-color: transparent;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.scx-input > input::placeholder {
+    color: var(--scx-text-placeholder-color);
+}
+
+.scx-input > svg {
+    width: 20px;
+    flex-shrink: 0;
+    cursor: pointer;
+}
+
+.scx-input:focus-within {
+    box-shadow: var(--scx-input-hover_box-shadow);
+}

package/scx-input/index.vue

@@ -1,44 +1,44 @@
-<template>
-    <div class="scx-input">
-        <scx-icon v-if="icon" :icon="icon"/>
-        <input v-model="m" :placeholder="placeholder" type="text"/>
-        <scx-icon v-show="m!==''" icon="outlined-close" @click="m=''"/>
-    </div>
-</template>
-
-<script>
-import "./index.css";
-import {computed} from "vue";
-
-export default {
-    name: "scx-input",
-    props: {
-        modelValue: {
-            type: String,
-            required: true,
-            default: "",
-        },
-        placeholder: {
-            type: String,
-            default: "输入名称搜索",
-        },
-        icon: {
-            type: String,
-            default: null
-        }
-    },
-    setup(props, context) {
-
-        const m = computed({
-            get() {
-                return props.modelValue;
-            },
-            set(value) {
-                context.emit("update:modelValue", value);
-            }
-        });
-
-        return {m};
-    }
-};
-</script>
+<template>
+    <div class="scx-input">
+        <scx-icon v-if="icon" :icon="icon"/>
+        <input v-model="m" :placeholder="placeholder" type="text"/>
+        <scx-icon v-show="m!==''" icon="outlined-close" @click="m=''"/>
+    </div>
+</template>
+
+<script>
+import "./index.css";
+import {computed} from "vue";
+
+export default {
+    name: "scx-input",
+    props: {
+        modelValue: {
+            type: String,
+            required: true,
+            default: "",
+        },
+        placeholder: {
+            type: String,
+            default: "输入名称搜索",
+        },
+        icon: {
+            type: String,
+            default: null
+        }
+    },
+    setup(props, context) {
+
+        const m = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                context.emit("update:modelValue", value);
+            }
+        });
+
+        return {m};
+    }
+};
+</script>