vft 0.0.1 → 0.0.2

package/src/common/code/index.less

@@ -1,321 +0,0 @@
-@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

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

package/src/common/code/index.vue

@@ -1,60 +0,0 @@
-<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

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

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

@@ -1,94 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-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'>
-