@scx-js/scx-ui 0.0.1 → 0.0.2

package/scx-panel/index.css

@@ -1,47 +1,47 @@
-.scx-panel {
-    border-radius: 4px;
-    padding: 10px;
-    background: var(--scx-glass-bg);
-    transition: background-color 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
-    backdrop-filter: var(--scx-glass-bg-filter);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    box-shadow: var(--scx-box-shadow-center);
-}
-
-/********************* vue 过渡动画 *******************/
-.scx-panel-t_left-bottom-enter-active,
-.scx-panel-t_left-bottom-leave-active,
-.scx-panel-t_left-top-enter-active,
-.scx-panel-t_left-top-leave-active,
-.scx-panel-t_top-enter-active,
-.scx-panel-t_top-leave-active {
-    opacity: 1;
-    transition: transform 200ms cubic-bezier(.23, 1, .32, 1), opacity 100ms cubic-bezier(.23, 1, .32, 1);
-}
-
-.scx-panel-t_left-top-enter-from,
-.scx-panel-t_left-top-leave-to,
-.scx-panel-t_left-bottom-enter-from,
-.scx-panel-t_left-bottom-leave-to,
-.scx-panel-t_top-enter-from,
-.scx-panel-t_top-leave-to {
-    opacity: 0;
-    transform: scale(0.95);
-}
-
-.scx-panel-t_left-bottom-enter-active,
-.scx-panel-t_left-bottom-leave-active {
-    transform-origin: left bottom;
-}
-
-.scx-panel-t_left-top-enter-active,
-.scx-panel-t_left-top-leave-active {
-    transform-origin: left top;
-}
-
-.scx-panel-t_top-enter-active,
-.scx-panel-t_top-leave-active {
-    transform-origin: top;
-}
+.scx-panel {
+    border-radius: 4px;
+    padding: 10px;
+    background: var(--scx-glass-bg);
+    transition: background-color 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+    backdrop-filter: var(--scx-glass-bg-filter);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--scx-box-shadow-center);
+}
+
+/********************* vue 过渡动画 *******************/
+.scx-panel-t_left-bottom-enter-active,
+.scx-panel-t_left-bottom-leave-active,
+.scx-panel-t_left-top-enter-active,
+.scx-panel-t_left-top-leave-active,
+.scx-panel-t_top-enter-active,
+.scx-panel-t_top-leave-active {
+    opacity: 1;
+    transition: transform 200ms cubic-bezier(.23, 1, .32, 1), opacity 100ms cubic-bezier(.23, 1, .32, 1);
+}
+
+.scx-panel-t_left-top-enter-from,
+.scx-panel-t_left-top-leave-to,
+.scx-panel-t_left-bottom-enter-from,
+.scx-panel-t_left-bottom-leave-to,
+.scx-panel-t_top-enter-from,
+.scx-panel-t_top-leave-to {
+    opacity: 0;
+    transform: scale(0.95);
+}
+
+.scx-panel-t_left-bottom-enter-active,
+.scx-panel-t_left-bottom-leave-active {
+    transform-origin: left bottom;
+}
+
+.scx-panel-t_left-top-enter-active,
+.scx-panel-t_left-top-leave-active {
+    transform-origin: left top;
+}
+
+.scx-panel-t_top-enter-active,
+.scx-panel-t_top-leave-active {
+    transform-origin: top;
+}

package/scx-panel/index.vue

@@ -1,28 +1,28 @@
-<template>
-    <transition :name="'scx-panel-t_'+transitionType">
-        <div v-show="modelValue" class="scx-panel">
-            <slot/>
-        </div>
-    </transition>
-</template>
-
-<script>
-import "./index.css";
-
-export default {
-    name: "scx-panel",
-    props: {
-        modelValue: {
-            type: Boolean,
-            default: false
-        },
-        transitionType: {
-            type: String,
-            default: "left-top"
-        }
-    },
-    setup(props, context) {
-
-    }
-};
-</script>
+<template>
+    <transition :name="'scx-panel-t_'+transitionType">
+        <div v-show="modelValue" class="scx-panel">
+            <slot/>
+        </div>
+    </transition>
+</template>
+
+<script>
+import "./index.css";
+
+export default {
+    name: "scx-panel",
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        transitionType: {
+            type: String,
+            default: "left-top"
+        }
+    },
+    setup(props, context) {
+
+    }
+};
+</script>

package/scx-panel/scx-panel-item.css

@@ -1,36 +1,36 @@
-.scx-panel-item {
-    flex-shrink: 0;
-    height: 40px;
-    display: flex;
-    border-radius: 2px;
-    align-items: center;
-    cursor: pointer;
-    border: 2px solid var(--scx-panel-item_border-color);
-    box-sizing: border-box;
-    padding-left: 5px;
-    padding-right: 5px;
-    transition: all ease 100ms;
-    background: var(--scx-panel-item_bg);
-}
-
-.scx-panel-item:hover,
-.scx-panel-item.active {
-    background: var(--scx-panel-item_hover-bg);
-    border: 2px solid var(--scx-panel-item_hover-border-color);
-    color: var(--scx-panel-item_hover-color);
-}
-
-.scx-panel-item > svg {
-    flex-shrink: 0;
-    margin-left: 10px;
-    margin-right: 10px;
-    fill: currentColor;
-}
-
-.scx-panel-item > span {
-    font-weight: 600;
-    padding-right: 5px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
+.scx-panel-item {
+    flex-shrink: 0;
+    height: 40px;
+    display: flex;
+    border-radius: 2px;
+    align-items: center;
+    cursor: pointer;
+    border: 2px solid var(--scx-panel-item_border-color);
+    box-sizing: border-box;
+    padding-left: 5px;
+    padding-right: 5px;
+    transition: all ease 100ms;
+    background: var(--scx-panel-item_bg);
+}
+
+.scx-panel-item:hover,
+.scx-panel-item.active {
+    background: var(--scx-panel-item_hover-bg);
+    border: 2px solid var(--scx-panel-item_hover-border-color);
+    color: var(--scx-panel-item_hover-color);
+}
+
+.scx-panel-item > svg {
+    flex-shrink: 0;
+    margin-left: 10px;
+    margin-right: 10px;
+    fill: currentColor;
+}
+
+.scx-panel-item > span {
+    font-weight: 600;
+    padding-right: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/scx-panel/scx-panel-item.vue

@@ -1,22 +1,22 @@
-<template>
-    <div :class="{active}" class="scx-panel-item">
-        <slot/>
-    </div>
-</template>
-
-<script>
-import "./scx-panel-item.css";
-
-export default {
-    name: "scx-panel-item",
-    props: {
-        active: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup() {
-
-    }
-};
-</script>
+<template>
+    <div :class="{active}" class="scx-panel-item">
+        <slot/>
+    </div>
+</template>
+
+<script>
+import "./scx-panel-item.css";
+
+export default {
+    name: "scx-panel-item",
+    props: {
+        active: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup() {
+
+    }
+};
+</script>

package/scx-progress/index.css

@@ -1,33 +1,33 @@
-.scx-progress {
-    display: flex;
-    height: 1rem;
-    overflow: hidden;
-    font-size: .75rem;
-    background-color: #c0c0c0;
-    border-radius: .25rem;
-}
-
-.scx-progress-bar {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    color: #fff;
-    text-align: right;
-    white-space: nowrap;
-    background-color: #0d6efd;
-    transition: width .6s ease;
-    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-    background-size: 1rem 1rem;
-    animation: 1s linear infinite scx-progress-bar-stripes;
-}
-
-.scx-progress-bar-text {
-    font-weight: 600;
-    margin: 0 5px;
-}
-
-@keyframes scx-progress-bar-stripes {
-    0% {
-        background-position-x: 1rem;
-    }
-}
+.scx-progress {
+    display: flex;
+    height: 1rem;
+    overflow: hidden;
+    font-size: .75rem;
+    background-color: #c0c0c0;
+    border-radius: .25rem;
+}
+
+.scx-progress-bar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: #fff;
+    text-align: right;
+    white-space: nowrap;
+    background-color: #0d6efd;
+    transition: width .6s ease;
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+    background-size: 1rem 1rem;
+    animation: 1s linear infinite scx-progress-bar-stripes;
+}
+
+.scx-progress-bar-text {
+    font-weight: 600;
+    margin: 0 5px;
+}
+
+@keyframes scx-progress-bar-stripes {
+    0% {
+        background-position-x: 1rem;
+    }
+}

package/scx-progress/index.vue

@@ -1,29 +1,29 @@
-<template>
-    <div class="scx-progress">
-        <div :style="{width: modelValue+'%',backgroundColor:color}" class="scx-progress-bar">
-            <div class="scx-progress-bar-text">{{ modelValue }} %</div>
-        </div>
-    </div>
-</template>
-
-<script>
-import "./index.css";
-
-export default {
-    name: "scx-progress",
-    props: {
-        modelValue: {
-            type: Number,
-            default: 0
-        },
-        color: {
-            type: String,
-            default: ""
-        }
-    }
-};
-</script>
-
-<style scoped>
-
-</style>
+<template>
+    <div class="scx-progress">
+        <div :style="{width: modelValue+'%',backgroundColor:color}" class="scx-progress-bar">
+            <div class="scx-progress-bar-text">{{ modelValue }} %</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import "./index.css";
+
+export default {
+    name: "scx-progress",
+    props: {
+        modelValue: {
+            type: Number,
+            default: 0
+        },
+        color: {
+            type: String,
+            default: ""
+        }
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/scx-switch/index.css

@@ -1,109 +1,109 @@
-.scx-switch + .scx-switch {
-    margin: 2px;
-}
-
-.scx-switch {
-    height: 22px;
-    width: 44px;
-    border: none;
-    background: rgba(0, 0, 0, .25);
-    border-radius: 11px;
-    position: relative;
-    vertical-align: middle;
-    transition: background-color 150ms, box-shadow 150ms;
-    cursor: pointer;
-    padding: 0;
-}
-
-.scx-switch:hover {
-    box-shadow: 0 0 0 0.1rem var(--scx-text-placeholder-color);
-}
-
-.scx-switch > .scx-switch-icon {
-    box-shadow: rgba(0, 35, 11, 0.2) 0 2px 4px 0;
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    height: 18px;
-    width: 18px;
-    background: white;
-    border-radius: 9px;
-    transition: left 150ms ease-in-out, width 200ms ease-in-out, margin-left 200ms ease-in-out;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1;
-}
-
-.scx-switch.scx-switch-checked {
-    background: var(--scx-theme);
-}
-
-.scx-switch.scx-switch-checked > .scx-switch-icon {
-    left: calc(100% - 18px - 2px);
-}
-
-.scx-switch.scx-switch-checked:active > .scx-switch-icon {
-    width: 22px;
-    margin-left: -4px;
-}
-
-.scx-switch:active > .scx-switch-icon {
-    width: 22px;
-    margin-left: 0;
-}
-
-.scx-switch > .scx-switch-label {
-    position: absolute;
-    top: 2px;
-    display: flex;
-    align-items: center;
-    right: 8px;
-}
-
-.scx-switch.scx-switch-checked > .scx-switch-label {
-    left: 8px;
-}
-
-.scx-switch:focus {
-    outline: none;
-}
-
-.scx-switch[disabled] {
-    cursor: not-allowed;
-    opacity: 0.4;
-}
-
-.scx-switch.scx-switch-checked:active {
-    animation: scx-switch-close-tips 1500ms infinite linear;
-}
-
-.scx-switch:active {
-    animation: scx-switch-open-tips 1500ms infinite linear;
-}
-
-@keyframes scx-switch-close-tips {
-    0% {
-        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
-    }
-    50% {
-
-        box-shadow: 0 0 0 0.2rem rgba(255, 38, 103, 0.5)
-    }
-    100% {
-        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
-    }
-}
-
-@keyframes scx-switch-open-tips {
-    0% {
-        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
-    }
-    50% {
-
-        box-shadow: 0 0 0 0.2rem rgba(17, 141, 47, 0.5);
-    }
-    100% {
-        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
-    }
-}
+.scx-switch + .scx-switch {
+    margin: 2px;
+}
+
+.scx-switch {
+    height: 22px;
+    width: 44px;
+    border: none;
+    background: rgba(0, 0, 0, .25);
+    border-radius: 11px;
+    position: relative;
+    vertical-align: middle;
+    transition: background-color 150ms, box-shadow 150ms;
+    cursor: pointer;
+    padding: 0;
+}
+
+.scx-switch:hover {
+    box-shadow: 0 0 0 0.1rem var(--scx-text-placeholder-color);
+}
+
+.scx-switch > .scx-switch-icon {
+    box-shadow: rgba(0, 35, 11, 0.2) 0 2px 4px 0;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    height: 18px;
+    width: 18px;
+    background: white;
+    border-radius: 9px;
+    transition: left 150ms ease-in-out, width 200ms ease-in-out, margin-left 200ms ease-in-out;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+}
+
+.scx-switch.scx-switch-checked {
+    background: var(--scx-theme);
+}
+
+.scx-switch.scx-switch-checked > .scx-switch-icon {
+    left: calc(100% - 18px - 2px);
+}
+
+.scx-switch.scx-switch-checked:active > .scx-switch-icon {
+    width: 22px;
+    margin-left: -4px;
+}
+
+.scx-switch:active > .scx-switch-icon {
+    width: 22px;
+    margin-left: 0;
+}
+
+.scx-switch > .scx-switch-label {
+    position: absolute;
+    top: 2px;
+    display: flex;
+    align-items: center;
+    right: 8px;
+}
+
+.scx-switch.scx-switch-checked > .scx-switch-label {
+    left: 8px;
+}
+
+.scx-switch:focus {
+    outline: none;
+}
+
+.scx-switch[disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+}
+
+.scx-switch.scx-switch-checked:active {
+    animation: scx-switch-close-tips 1500ms infinite linear;
+}
+
+.scx-switch:active {
+    animation: scx-switch-open-tips 1500ms infinite linear;
+}
+
+@keyframes scx-switch-close-tips {
+    0% {
+        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
+    }
+    50% {
+
+        box-shadow: 0 0 0 0.2rem rgba(255, 38, 103, 0.5)
+    }
+    100% {
+        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
+    }
+}
+
+@keyframes scx-switch-open-tips {
+    0% {
+        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
+    }
+    50% {
+
+        box-shadow: 0 0 0 0.2rem rgba(17, 141, 47, 0.5);
+    }
+    100% {
+        box-shadow: 0 0 0 0.1rem rgba(99, 172, 255, 0.5);
+    }
+}

package/scx-switch/index.vue

@@ -1,31 +1,31 @@
-<template>
-    <button :class="{'scx-switch-checked': modelValue}" class="scx-switch" type="button" @click="changeSwitchState">
-        <span class="scx-switch-icon">
-            <slot name="icon"/>
-        </span>
-        <span class="scx-switch-label">
-            <slot name="label"/>
-        </span>
-    </button>
-</template>
-<script>
-import "./index.css";
-
-export default {
-    name: "scx-switch",
-    props: {
-        modelValue: Boolean,
-        default: false
-    },
-    emits: ["update:modelValue", "change"],
-    setup(props, context) {
-        function changeSwitchState() {
-            const val = !props.modelValue;
-            context.emit("update:modelValue", val);
-            context.emit("change", val);
-        }
-
-        return {changeSwitchState};
-    }
-};
-</script>
+<template>
+    <button :class="{'scx-switch-checked': modelValue}" class="scx-switch" type="button" @click="changeSwitchState">
+        <span class="scx-switch-icon">
+            <slot name="icon"/>
+        </span>
+        <span class="scx-switch-label">
+            <slot name="label"/>
+        </span>
+    </button>
+</template>
+<script>
+import "./index.css";
+
+export default {
+    name: "scx-switch",
+    props: {
+        modelValue: Boolean,
+        default: false
+    },
+    emits: ["update:modelValue", "change"],
+    setup(props, context) {
+        function changeSwitchState() {
+            const val = !props.modelValue;
+            context.emit("update:modelValue", val);
+            context.emit("change", val);
+        }
+
+        return {changeSwitchState};
+    }
+};
+</script>