vft 0.0.1

package/src/common/code/index.less

@@ -0,0 +1,321 @@
+@prefix-cls: ~'@{pro-namespace}-code';
+@them-dark: ~'@{pro-namespace}-theme-dark';
+
+.@{them-dark} {
+  .@{prefix-cls} {
+    code[class*='language-'],
+    pre[class*='language-'] {
+      color: #f8f8f2;
+      background: none;
+      text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+      font-size: 1em;
+      text-align: left;
+      white-space: pre;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+      line-height: 1.5;
+      -moz-tab-size: 4;
+      -o-tab-size: 4;
+      tab-size: 4;
+      -webkit-hyphens: none;
+      -moz-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
+    }
+
+    /* Code blocks */
+
+    pre[class*='language-'] {
+      padding: 1em;
+      margin: 0.5em 0;
+      overflow: auto;
+      border-radius: 0.3em;
+    }
+
+    :not(pre) > code[class*='language-'],
+    pre[class*='language-'] {
+      background: #272822;
+    }
+
+    /* Inline code */
+
+    :not(pre) > code[class*='language-'] {
+      padding: 0.1em;
+      border-radius: 0.3em;
+      white-space: normal;
+    }
+
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+      color: #8292a2;
+    }
+
+    .token.punctuation {
+      color: #f8f8f2;
+    }
+
+    .token.namespace {
+      opacity: 0.7;
+    }
+
+    .token.property,
+    .token.tag,
+    .token.constant,
+    .token.symbol,
+    .token.deleted {
+      color: #f92672;
+    }
+
+    .token.boolean,
+    .token.number {
+      color: #ae81ff;
+    }
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted {
+      color: #a6e22e;
+    }
+
+    .token.operator,
+    .token.entity,
+    .token.url,
+    .language-css .token.string,
+    .style .token.string,
+    .token.variable {
+      color: #f8f8f2;
+    }
+
+    .token.atrule,
+    .token.attr-value,
+    .token.function,
+    .token.class-name {
+      color: #e6db74;
+    }
+
+    .token.keyword {
+      color: #66d9ef;
+    }
+
+    .token.regex,
+    .token.important {
+      color: #fd971f;
+    }
+
+    .token.important,
+    .token.bold {
+      font-weight: bold;
+    }
+
+    .token.italic {
+      font-style: italic;
+    }
+
+    .token.entity {
+      cursor: help;
+    }
+  }
+}
+
+.@{prefix-cls} {
+  @media print {
+    code[class*='language-'],
+    pre[class*='language-'] {
+      text-shadow: none;
+    }
+  }
+
+  code[class*='language-'],
+  pre[class*='language-'] {
+    color: black;
+    background: none;
+    text-shadow: 0 1px white;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  pre[class*='language-']::selection,
+  pre[class*='language-'] ::-moz-selection,
+  code[class*='language-']::-moz-selection,
+  code[class*='language-'] ::-moz-selection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+
+  pre[class*='language-']::selection,
+  pre[class*='language-'] ::selection,
+  code[class*='language-']::selection,
+  code[class*='language-'] ::selection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+
+  /* Code blocks */
+
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+
+  :not(pre) > code[class*='language-'],
+  pre[class*='language-'] {
+    background: #f5f2f0;
+  }
+
+  /* Inline code */
+
+  :not(pre) > code[class*='language-'] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: slategray;
+  }
+
+  .token.punctuation {
+    color: #999;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #905;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #690;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: #9a6e3a;
+
+    /* This background color was intended by the author of this theme. */
+    background: hsla(0deg, 0%, 100%, 0.5);
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #07a;
+  }
+
+  .token.function,
+  .token.class-name {
+    color: #dd4a68;
+  }
+
+  .token.regex,
+  .token.important,
+  .token.variable {
+    color: #e90;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+
+  pre[class*='language-'].line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+  }
+
+  pre[class*='language-'].line-numbers > code {
+    position: relative;
+    white-space: inherit;
+  }
+
+  .line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .line-numbers-rows > span {
+    display: block;
+    counter-increment: linenumber;
+  }
+
+  .line-numbers-rows > span::before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+  }
+}
+
+.@{prefix-cls} {
+  .copy-icon {
+    position: absolute;
+    right: 10px;
+    padding: 8px;
+    border-radius: 2px;
+    transition: all 0.2s;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.1);
+    }
+  }
+}

package/src/common/code/index.ts

@@ -0,0 +1,3 @@
+import Code from './index.vue';
+
+export { Code };

package/src/common/code/index.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { copyToClipBoard } from '@vri/utils';
+import { useTimeoutFn } from '@vueuse/core';
+import Prism from 'prismjs';
+import { onMounted, reactive } from 'vue';
+import { $ref } from 'vue/macros';
+
+interface CodeProps {
+  code: string;
+  type?: string;
+  showLineNum?: boolean;
+}
+
+const { type = 'markup', showLineNum = true, code } = defineProps<CodeProps>();
+
+
+onMounted(() => {
+  Prism.highlightAll();
+});
+
+let copyStatus = $ref(false);
+
+let copyIcon = reactive({
+  icon: 'copy',
+  color: '',
+  size: 16
+});
+
+let successIcon = reactive({
+  icon: 'success',
+  color: '#1989fa',
+  size: 18
+});
+
+function handleCopy() {
+  if (!copyStatus) {
+    copyStatus = true;
+    copyToClipBoard(code, () => {
+      useTimeoutFn(() => {
+        copyStatus = false;
+      }, 1500);
+    });
+  }
+}
+</script>
+
+<template>
+  <div>
+    12
+    <!--<pre :class="[{ 'line-numbers': showLineNum }, `language-${type}`]">-->
+    <!--   <vri-icon @click="handleCopy" class="copy-icon" v-bind="copyStatus ? successIcon : copyIcon" cursor />-->
+    <!--   <code :class="'language-'+ type"-->
+    <!--     v-html="Prism.highlight(code, Prism.languages[type], type)" />-->
+    <!--</pre>-->
+  </div>
+</template>
+
+<!--<style lang="less">-->
+<!--@import './index.less';-->
+<!--</style>-->

package/src/common/config-provider/index.ts

@@ -0,0 +1,4 @@
+import ConfigProvider from './index.vue';
+
+export * from './types';
+export { ConfigProvider };

package/src/common/config-provider/index.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { inBrowser, kebabCase } from '@vri/utils';
+import { computed, watch, onActivated, onDeactivated, onBeforeUnmount } from 'vue';
+import { provideGlobalConfig, useNamespace } from '../../use';
+import type { MessageConfigContext } from '../message/message';
+import { messageConfig } from './types';
+
+interface ConfigProviderProps {
+  /** 主题风格 */
+  theme?: Theme;
+  /** 自定义主题变量 */
+  themeVars?: Record<string, Numberish>;
+  /** 仅在深色模式下生效的主题变量 */
+  themeVarsDark?: Record<string, Numberish>;
+  /** 仅在浅色模式下生效的主题变量 */
+  themeVarsLight?: Record<string, Numberish>;
+  /** 所有图标的类名前缀 */
+  iconPrefix?: string;
+  /** 组件公共命名 */
+  namespace?: string;
+  /** 设置所有弹窗类组件的 z-index */
+  zIndex?: number;
+  /** 可同时显示的消息最大数量 */
+  message?: MessageConfigContext;
+  projectCfg?: Record<string, any>;
+}
+
+const { theme = 'light', namespace = 'vri', themeVars, themeVarsDark, themeVarsLight, zIndex, iconPrefix, message, projectCfg } = defineProps<ConfigProviderProps>();
+
+const ns = /* hoist-static*/ useNamespace('config-provider');
+
+defineOptions({
+  name: ns.b()
+});
+
+// 将外部传入的 message 的配置进行合并处理
+watch(
+  () => message,
+  (val) => {
+    Object.assign(messageConfig, val ?? {});
+  },
+  { immediate: true, deep: true }
+);
+
+// 合并传入的主题变量传入到 style 中
+const style = computed(() => {
+  const isDark = theme === 'dark';
+  return mapThemeVarsToCSSVars({
+    ...themeVars,
+    ...(isDark ? themeVarsDark : themeVarsLight)
+  });
+});
+
+if (inBrowser) {
+  const addTheme = () => {
+    document.documentElement.classList.add(theme);
+  };
+  const removeTheme = (_theme = theme) => {
+    document.documentElement.classList.remove(_theme);
+  };
+
+  // 监听 theme 主题的变化，移除旧的，添加新的在 document.body 上
+  watch(
+    () => theme,
+    (newVal, oldVal) => {
+      if (oldVal) {
+        removeTheme(oldVal);
+      }
+      addTheme();
+    },
+    { immediate: true }
+  );
+
+  onActivated(addTheme);
+  onDeactivated(removeTheme);
+  onBeforeUnmount(removeTheme);
+}
+
+function mapThemeVarsToCSSVars(themeVars: Record<string, Numberish>) {
+  const cssVars: Record<string, Numberish> = {};
+  Object.keys(themeVars).forEach((key) => {
+    cssVars[`--${namespace}-${kebabCase(key)}`] = themeVars[key];
+  });
+  return cssVars;
+}
+
+provideGlobalConfig({ iconPrefix, namespace, message, zIndex, projectCfg });
+</script>
+
+<template>
+  <div :class="ns.b()" :style="style">
+    <slot />
+  </div>
+</template>

package/src/common/config-provider/types.ts

@@ -0,0 +1,29 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { MessageConfigContext } from '../message/message';
+
+interface ConfigProviderProps {
+  /** 主题风格 */
+  theme?: Theme;
+  /** 自定义主题变量 */
+  themeVars?: Record<string, Numberish>;
+  /** 仅在深色模式下生效的主题变量 */
+  themeVarsDark?: Record<string, Numberish>;
+  /** 仅在浅色模式下生效的主题变量 */
+  themeVarsLight?: Record<string, Numberish>;
+  /** 所有图标的类名前缀 */
+  iconPrefix?: string;
+  /** 组件公共命名 */
+  namespace?: string;
+  /** 设置所有弹窗类组件的 z-index */
+  zIndex?: number;
+  /** 可同时显示的消息最大数量 */
+  message?: MessageConfigContext;
+  projectCfg?: Record<string, any>
+}
+
+export const messageConfig: MessageConfigContext = {};
+
+export const CONFIG_PROVIDER_KEY: InjectionKey<Ref<ConfigProviderContext>> = Symbol('config-provider-component');
+
+export type ConfigProviderContext = Pick<ConfigProviderProps, 'iconPrefix' | 'namespace' | 'zIndex' | 'message' | 'projectCfg'>
+