br-dionysus 1.6.6 → 1.6.7

package/docs/packages/SkinConfig/docs/demo.vue

@@ -0,0 +1,680 @@
+<template>
+  <div class="g-demo-skin-config-box">
+    <SkinConfig
+      ref="shinConfigRef"
+      @change="size = $event.size"
+    ></SkinConfig>
+
+    <div class="m-box">
+      <div class="u-color-box">
+        <h3>色卡</h3>
+        <ul>
+          <li
+            class="u-li"
+            v-for="item in list"
+            :class="item.className"
+          >
+            {{ item.name }}
+          </li>
+        </ul>
+      </div>
+      <div class="u-el">
+        <h3>元素</h3>
+        <div>
+          <el-button :size="size">Default</el-button>
+          <el-button
+            type="primary"
+            :size="size"
+          >
+            Primary
+          </el-button>
+          <el-button
+            type="success"
+            :size="size"
+          >
+            Success
+          </el-button>
+          <el-button
+            type="info"
+            :size="size"
+          >
+            Info
+          </el-button>
+          <el-button
+            type="warning"
+            :size="size"
+          >
+            Warning
+          </el-button>
+          <el-button
+            type="danger"
+            :size="size"
+          >
+            Danger
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { SkinConfig } from 'packages/SkinConfig'
+
+const size = ref<string>('')
+const shinConfigRef = ref<InstanceType<typeof SkinConfig> | null>(null)
+onMounted(() => {
+  const config = shinConfigRef.value ? shinConfigRef.value.getSkin() : null
+  if (config) size.value = config.size
+})
+
+const list = ref<{ name: string, className: string }[]>([
+  {
+    name: '--el-color-primary',
+    className: 'el-color-primary'
+  },
+  {
+    name: '--el-color-primary-light-3',
+    className: 'el-color-primary-light-3'
+  },
+  {
+    name: '--el-color-primary-light-5',
+    className: 'el-color-primary-light-5'
+  },
+  {
+    name: '--el-color-primary-light-7',
+    className: 'el-color-primary-light-7'
+  },
+  {
+    name: '--el-color-primary-light-8',
+    className: 'el-color-primary-light-8'
+  },
+  {
+    name: '--el-color-primary-light-9',
+    className: 'el-color-primary-light-9'
+  },
+  {
+    name: '--el-color-primary-dark-2',
+    className: 'el-color-primary-dark-2'
+  },
+  {
+    name: '--el-color-success',
+    className: 'el-color-success'
+  },
+  {
+    name: '--el-color-success-light-3',
+    className: 'el-color-success-light-3'
+  },
+  {
+    name: '--el-color-success-light-5',
+    className: 'el-color-success-light-5'
+  },
+  {
+    name: '--el-color-success-light-7',
+    className: 'el-color-success-light-7'
+  },
+  {
+    name: '--el-color-success-light-8',
+    className: 'el-color-success-light-8'
+  },
+  {
+    name: '--el-color-success-light-9',
+    className: 'el-color-success-light-9'
+  },
+  {
+    name: '--el-color-success-dark-2',
+    className: 'el-color-success-dark-2'
+  },
+  {
+    name: '--el-color-warning',
+    className: 'el-color-warning'
+  },
+  {
+    name: '--el-color-warning-light-3',
+    className: 'el-color-warning-light-3'
+  },
+  {
+    name: '--el-color-warning-light-5',
+    className: 'el-color-warning-light-5'
+  },
+  {
+    name: '--el-color-warning-light-7',
+    className: 'el-color-warning-light-7'
+  },
+  {
+    name: '--el-color-warning-light-8',
+    className: 'el-color-warning-light-8'
+  },
+  {
+    name: '--el-color-warning-light-9',
+    className: 'el-color-warning-light-9'
+  },
+  {
+    name: '--el-color-warning-dark-2',
+    className: 'el-color-warning-dark-2'
+  },
+  {
+    name: '--el-color-danger',
+    className: 'el-color-danger'
+  },
+  {
+    name: '--el-color-danger-light-3',
+    className: 'el-color-danger-light-3'
+  },
+  {
+    name: '--el-color-danger-light-5',
+    className: 'el-color-danger-light-5'
+  },
+  {
+    name: '--el-color-danger-light-7',
+    className: 'el-color-danger-light-7'
+  },
+  {
+    name: '--el-color-danger-light-8',
+    className: 'el-color-danger-light-8'
+  },
+  {
+    name: '--el-color-danger-light-9',
+    className: 'el-color-danger-light-9'
+  },
+  {
+    name: '--el-color-danger-dark-2',
+    className: 'el-color-danger-dark-2'
+  },
+  {
+    name: '--el-color-error',
+    className: 'el-color-error'
+  },
+  {
+    name: '--el-color-error-light-3',
+    className: 'el-color-error-light-3'
+  },
+  {
+    name: '--el-color-error-light-5',
+    className: 'el-color-error-light-5'
+  },
+  {
+    name: '--el-color-error-light-7',
+    className: 'el-color-error-light-7'
+  },
+  {
+    name: '--el-color-error-light-8',
+    className: 'el-color-error-light-8'
+  },
+  {
+    name: '--el-color-error-light-9',
+    className: 'el-color-error-light-9'
+  },
+  {
+    name: '--el-color-error-dark-2',
+    className: 'el-color-error-dark-2'
+  },
+  {
+    name: '--el-color-info',
+    className: 'el-color-info'
+  },
+  {
+    name: '--el-color-info-light-3',
+    className: 'el-color-info-light-3'
+  },
+  {
+    name: '--el-color-info-light-5',
+    className: 'el-color-info-light-5'
+  },
+  {
+    name: '--el-color-info-light-7',
+    className: 'el-color-info-light-7'
+  },
+  {
+    name: '--el-color-info-light-8',
+    className: 'el-color-info-light-8'
+  },
+  {
+    name: '--el-color-info-light-9',
+    className: 'el-color-info-light-9'
+  },
+  {
+    name: '--el-color-info-dark-2',
+    className: 'el-color-info-dark-2'
+  },
+  {
+    name: '--el-box-shadow',
+    className: 'el-box-shadow'
+  },
+  {
+    name: '--el-box-shadow-light',
+    className: 'el-box-shadow-light'
+  },
+  {
+    name: '--el-box-shadow-lighter',
+    className: 'el-box-shadow-lighter'
+  },
+  {
+    name: '--el-box-shadow-dark',
+    className: 'el-box-shadow-dark'
+  },
+  {
+    name: '--el-bg-color-page',
+    className: 'el-bg-color-page'
+  },
+  {
+    name: '--el-bg-color',
+    className: 'el-bg-color'
+  },
+  {
+    name: '--el-bg-color-overlay',
+    className: 'el-bg-color-overlay'
+  },
+  {
+    name: '--el-text-color-primary',
+    className: 'el-text-color-primary'
+  },
+  {
+    name: '--el-text-color-regular',
+    className: 'el-text-color-regular'
+  },
+  {
+    name: '--el-text-color-secondary',
+    className: 'el-text-color-secondary'
+  },
+  {
+    name: '--el-text-color-placeholder',
+    className: 'el-text-color-placeholder'
+  },
+  {
+    name: '--el-text-color-disabled',
+    className: 'el-text-color-disabled'
+  },
+  {
+    name: '--el-border-color-darker',
+    className: 'el-border-color-darker'
+  },
+  {
+    name: '--el-border-color-dark',
+    className: 'el-border-color-dark'
+  },
+  {
+    name: '--el-border-color',
+    className: 'el-border-color'
+  },
+  {
+    name: '--el-border-color-light',
+    className: 'el-border-color-light'
+  },
+  {
+    name: '--el-border-color-lighter',
+    className: 'el-border-color-lighter'
+  },
+  {
+    name: '--el-border-color-extra-light',
+    className: 'el-border-color-extra-light'
+  },
+  {
+    name: '--el-fill-color-darker',
+    className: 'el-fill-color-darker'
+  },
+  {
+    name: '--el-fill-color-dark',
+    className: 'el-fill-color-dark'
+  },
+  {
+    name: '--el-fill-color',
+    className: 'el-fill-color'
+  },
+  {
+    name: '--el-fill-color-light',
+    className: 'el-fill-color-light'
+  },
+  {
+    name: '--el-fill-color-lighter',
+    className: 'el-fill-color-lighter'
+  },
+  {
+    name: '--el-fill-color-extra-light',
+    className: 'el-fill-color-extra-light'
+  },
+  {
+    name: '--el-fill-color-blank',
+    className: 'el-fill-color-blank'
+  },
+  {
+    name: '--el-mask-color',
+    className: 'el-mask-color'
+  },
+  {
+    name: '--el-mask-color-extra-light',
+    className: 'el-mask-color-extra-light'
+  }
+])
+</script>
+
+<style lang="scss">
+:root[data-dark="true"] {
+  color-scheme: dark;
+  --el-color-primary: #409eff;
+  --el-color-primary-light-3: #3375b9;
+  --el-color-primary-light-5: #2a598a;
+  --el-color-primary-light-7: #213d5b;
+  --el-color-primary-light-8: #1d3043;
+  --el-color-primary-light-9: #18222c;
+  --el-color-primary-dark-2: #66b1ff;
+  --el-color-success: #67c23a;
+  --el-color-success-light-3: #4e8e2f;
+  --el-color-success-light-5: #3e6b27;
+  --el-color-success-light-7: #2d481f;
+  --el-color-success-light-8: #25371c;
+  --el-color-success-light-9: #1c2518;
+  --el-color-success-dark-2: #85ce61;
+  --el-color-warning: #e6a23c;
+  --el-color-warning-light-3: #a77730;
+  --el-color-warning-light-5: #7d5b28;
+  --el-color-warning-light-7: #533f20;
+  --el-color-warning-light-8: #3e301c;
+  --el-color-warning-light-9: #292218;
+  --el-color-warning-dark-2: #ebb563;
+  --el-color-danger: #f56c6c;
+  --el-color-danger-light-3: #b25252;
+  --el-color-danger-light-5: #854040;
+  --el-color-danger-light-7: #582e2e;
+  --el-color-danger-light-8: #412626;
+  --el-color-danger-light-9: #2b1d1d;
+  --el-color-danger-dark-2: #f78989;
+  --el-color-error: #f56c6c;
+  --el-color-error-light-3: #b25252;
+  --el-color-error-light-5: #854040;
+  --el-color-error-light-7: #582e2e;
+  --el-color-error-light-8: #412626;
+  --el-color-error-light-9: #2b1d1d;
+  --el-color-error-dark-2: #f78989;
+  --el-color-info: #909399;
+  --el-color-info-light-3: #6b6d71;
+  --el-color-info-light-5: #525457;
+  --el-color-info-light-7: #393a3c;
+  --el-color-info-light-8: #2d2d2f;
+  --el-color-info-light-9: #202121;
+  --el-color-info-dark-2: #a6a9ad;
+
+  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .36), 0px 8px 20px rgba(0, 0, 0, .72);
+  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .72);
+  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .72);
+  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
+  --el-bg-color-page: #0a0a0a;
+  --el-bg-color: #141414;
+  --el-bg-color-overlay: #1d1e1f;
+  --el-text-color-primary: #E5EAF3;
+  --el-text-color-regular: #CFD3DC;
+  --el-text-color-secondary: #A3A6AD;
+  --el-text-color-placeholder: #8D9095;
+  --el-text-color-disabled: #6C6E72;
+  --el-border-color-darker: #636466;
+  --el-border-color-dark: #58585B;
+  --el-border-color: #4C4D4F;
+  --el-border-color-light: #414243;
+  --el-border-color-lighter: #363637;
+  --el-border-color-extra-light: #2B2B2C;
+  --el-fill-color-darker: #424243;
+  --el-fill-color-dark: #39393A;
+  --el-fill-color: #303030;
+  --el-fill-color-light: #262727;
+  --el-fill-color-lighter: #1D1D1D;
+  --el-fill-color-extra-light: #191919;
+  --el-fill-color-blank: transparent;
+  --el-mask-color: rgba(0, 0, 0, .8);
+  --el-mask-color-extra-light: rgba(0, 0, 0, .3);
+}
+</style>
+
+<style scoped lang="scss">
+.g-demo-skin-config-box {
+  max-width: 1000px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--m-scrollbar-thumb-hover-color);
+}
+
+.el-color-primary {
+  background-color: var(--el-color-primary);
+}
+.el-color-primary-light-3 {
+  background-color: var(--el-color-primary-light-3);
+}
+.el-color-primary-light-5 {
+  background-color: var(--el-color-primary-light-5);
+}
+.el-color-primary-light-7 {
+  background-color: var(--el-color-primary-light-7);
+}
+.el-color-primary-light-8 {
+  background-color: var(--el-color-primary-light-8);
+}
+.el-color-primary-light-9 {
+  background-color: var(--el-color-primary-light-9);
+}
+.el-color-primary-dark-2 {
+  background-color: var(--el-color-primary-dark-2);
+}
+.el-color-success {
+  background-color: var(--el-color-success);
+}
+.el-color-success-light-3 {
+  background-color: var(--el-color-success-light-3);
+}
+.el-color-success-light-5 {
+  background-color: var(--el-color-success-light-5);
+}
+.el-color-success-light-7 {
+  background-color: var(--el-color-success-light-7);
+}
+.el-color-success-light-8 {
+  background-color: var(--el-color-success-light-8);
+}
+.el-color-success-light-9 {
+  background-color: var(--el-color-success-light-9);
+}
+.el-color-success-dark-2 {
+  background-color: var(--el-color-success-dark-2);
+}
+.el-color-warning {
+  background-color: var(--el-color-warning);
+}
+.el-color-warning-light-3 {
+  background-color: var(--el-color-warning-light-3);
+}
+.el-color-warning-light-5 {
+  background-color: var(--el-color-warning-light-5);
+}
+.el-color-warning-light-7 {
+  background-color: var(--el-color-warning-light-7);
+}
+.el-color-warning-light-8 {
+  background-color: var(--el-color-warning-light-8);
+}
+.el-color-warning-light-9 {
+  background-color: var(--el-color-warning-light-9);
+}
+.el-color-warning-dark-2 {
+  background-color: var(--el-color-warning-dark-2);
+}
+.el-color-danger {
+  background-color: var(--el-color-danger);
+}
+.el-color-danger-light-3 {
+  background-color: var(--el-color-danger-light-3);
+}
+.el-color-danger-light-5 {
+  background-color: var(--el-color-danger-light-5);
+}
+.el-color-danger-light-7 {
+  background-color: var(--el-color-danger-light-7);
+}
+.el-color-danger-light-8 {
+  background-color: var(--el-color-danger-light-8);
+}
+.el-color-danger-light-9 {
+  background-color: var(--el-color-danger-light-9);
+}
+.el-color-danger-dark-2 {
+  background-color: var(--el-color-danger-dark-2);
+}
+.el-color-error {
+  background-color: var(--el-color-error);
+}
+.el-color-error-light-3 {
+  background-color: var(--el-color-error-light-3);
+}
+.el-color-error-light-5 {
+  background-color: var(--el-color-error-light-5);
+}
+.el-color-error-light-7 {
+  background-color: var(--el-color-error-light-7);
+}
+.el-color-error-light-8 {
+  background-color: var(--el-color-error-light-8);
+}
+.el-color-error-light-9 {
+  background-color: var(--el-color-error-light-9);
+}
+.el-color-error-dark-2 {
+  background-color: var(--el-color-error-dark-2);
+}
+.el-color-info {
+  background-color: var(--el-color-info);
+}
+.el-color-info-light-3 {
+  background-color: var(--el-color-info-light-3);
+}
+.el-color-info-light-5 {
+  background-color: var(--el-color-info-light-5);
+}
+.el-color-info-light-7 {
+  background-color: var(--el-color-info-light-7);
+}
+.el-color-info-light-8 {
+  background-color: var(--el-color-info-light-8);
+}
+.el-color-info-light-9 {
+  background-color: var(--el-color-info-light-9);
+}
+.el-color-info-dark-2 {
+  background-color: var(--el-color-info-dark-2);
+}
+.el-box-shadow {
+  background-color: var(--el-box-shadow);
+}
+.el-box-shadow-light {
+  background-color: var(--el-box-shadow-light);
+}
+.el-box-shadow-lighter {
+  background-color: var(--el-box-shadow-lighter);
+}
+.el-box-shadow-dark {
+  background-color: var(--el-box-shadow-dark);
+}
+.el-bg-color-page {
+  background-color: var(--el-bg-color-page);
+}
+.el-bg-color {
+  background-color: var(--el-bg-color);
+}
+.el-bg-color-overlay {
+  background-color: var(--el-bg-color-overlay);
+}
+.el-text-color-primary {
+  background-color: var(--el-text-color-primary);
+}
+.el-text-color-regular {
+  background-color: var(--el-text-color-regular);
+}
+.el-text-color-secondary {
+  background-color: var(--el-text-color-secondary);
+}
+.el-text-color-placeholder {
+  background-color: var(--el-text-color-placeholder);
+}
+.el-text-color-disabled {
+  background-color: var(--el-text-color-disabled);
+}
+.el-border-color-darker {
+  background-color: var(--el-border-color-darker);
+}
+.el-border-color-dark {
+  background-color: var(--el-border-color-dark);
+}
+.el-border-color {
+  background-color: var(--el-border-color);
+}
+.el-border-color-light {
+  background-color: var(--el-border-color-light);
+}
+.el-border-color-lighter {
+  background-color: var(--el-border-color-lighter);
+}
+.el-border-color-extra-light {
+  background-color: var(--el-border-color-extra-light);
+}
+.el-fill-color-darker {
+  background-color: var(--el-fill-color-darker);
+}
+.el-fill-color-dark {
+  background-color: var(--el-fill-color-dark);
+}
+.el-fill-color {
+  background-color: var(--el-fill-color);
+}
+.el-fill-color-light {
+  background-color: var(--el-fill-color-light);
+}
+.el-fill-color-lighter {
+  background-color: var(--el-fill-color-lighter);
+}
+.el-fill-color-extra-light {
+  background-color: var(--el-fill-color-extra-light);
+}
+.el-fill-color-blank {
+  background-color: var(--el-fill-color-blank);
+}
+.el-mask-color {
+  background-color: var(--el-mask-color);
+}
+.el-mask-color-extra-light {
+  background-color: var(--el-mask-color-extra-light);
+}
+</style>
+
+<style lang="scss">
+/*浏览器滚动条*/
+// 滚动条凹槽的颜色，还可以设置边框属性
+::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+
+// 滚动条的宽度
+::-webkit-scrollbar {
+  width: var(--m-scrollbar-thumb-width);
+  height: 9px;
+}
+
+// 滚动条的设置
+::-webkit-scrollbar-thumb {
+  background-color: var(--m-scrollbar-thumb-color);
+  background-clip: padding-box;
+  border-radius: 5px;
+  min-height: 28px;
+}
+</style>
+
+<style scoped lang="scss">
+.u-li {
+  width: 300px;
+}
+
+.m-box {
+  display: flex;
+}
+
+.u-el {
+  margin-left: 20px;
+}
+</style>

package/docs/packages/SkinConfig/index.ts

@@ -0,0 +1,10 @@
+import { App, Plugin } from 'vue'
+import SkinConfig from './src/SkinConfig.vue'
+
+export const SkinConfigPlugin: Plugin = {
+  install (app: App) {
+    app.component('SkinConfig', SkinConfig)
+  }
+}
+
+export { SkinConfig }