@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

package/src/components/config-provider/OPlusConfigProvider.vue

@@ -1,32 +0,0 @@
-<script lang="ts" setup>
-import { computed, provide, reactive } from 'vue';
-
-import { OConfigProvider } from '@opensig/opendesign';
-import zhCN from '@opensig/opendesign/es/locale/lang/zh-cn';
-import enUS from '@opensig/opendesign/es/locale/lang/en-us';
-
-import { configProviderInjectKey } from '@/shared/provide';
-
-export interface OPlusConfigProviderPropsT {
-  locale?: 'zh' | 'en';
-  theme?: 'light' | 'dark';
-}
-
-const props = withDefaults(defineProps<OPlusConfigProviderPropsT>(), {
-  locale: 'zh',
-  theme: 'light',
-});
-
-const globalConfig = reactive({
-  locale: computed(() => props.locale),
-  theme: computed(() => props.theme),
-});
-
-provide(configProviderInjectKey, globalConfig);
-</script>
-
-<template>
-  <OConfigProvider :locale="locale === 'zh' ? zhCN : enUS">
-    <slot />
-  </OConfigProvider>
-</template>

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

@@ -1,10 +0,0 @@
-import _OPlusConfigProvider from './OPlusConfigProvider.vue';
-import type { App } from 'vue';
-
-const OPlusConfigProvider = Object.assign(_OPlusConfigProvider, {
-  install(app: App) {
-    app.component('OPlusConfigProvider', _OPlusConfigProvider);
-  },
-});
-
-export { OPlusConfigProvider };

package/src/components/cookie-notice/OCookieNotice.vue

@@ -1,575 +0,0 @@
-<script lang="ts" setup>
-import { ref, onMounted, computed, nextTick, watch } from 'vue';
-import ClientOnly from '../common/ClientOnly.vue';
-import { useScreen } from '@opendesign-plus/composables';
-import { useI18n } from '@/i18n';
-import { DialogActionT, OButton, ODialog, OIcon, OIconClose, OSwitch } from '@opensig/opendesign';
-import { useVModel } from '@vueuse/core';
-
-const NOT_SIGNED = '0';
-const ALL_AGREED = '1';
-const NECCESSARY_AGREED = '2';
-const NOT_SHOW_BUT_AGREED = '3';
-const COOKIE_KEY_ZH = 'agreed-cookiepolicy-zh';
-const COOKIE_KEY_EN = 'agreed-cookiepolicy-en';
-
-const props = defineProps<{
-  visible?: boolean;
-  community: string;
-  detailUrl: string;
-  wrapper?: string | HTMLElement;
-  cookieDomain: string;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void;
-}>();
-
-const { lePadV, leLaptop, isPhone } = useScreen();
-const { locale, t } = useI18n();
-const isZh = computed(() => locale.value === 'zh');
-
-const cookieNoticeRef = ref<HTMLDivElement>();
-const enableGrid = computed(() => {
-  if (cookieNoticeRef.value) {
-    return !!getComputedStyle(cookieNoticeRef.value!).getPropertyValue('--grid-content-width');
-  }
-  return false;
-});
-
-const cookieKey = computed(() => (isZh.value ? COOKIE_KEY_ZH : COOKIE_KEY_EN));
-
-// 是否允许分析cookie
-const analysisAllowed = ref(false);
-const visibleVmodel = useVModel(props, 'visible', emit, { defaultValue: false });
-
-const getCookie = (key: string) => {
-  const cookie = document.cookie.split(';').find((row) => row.split('=')[0].trim() === encodeURIComponent(key));
-  if (!cookie) {
-    return null;
-  }
-  return decodeURIComponent(cookie.split('=')[1]);
-};
-
-const setCookie = (key: string, value: string, days: number, domain: string) => {
-  const maxAge = days ? `; max-age=${days * 24 * 60 * 60}` : '';
-  document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}${maxAge}; path=/; domain=${domain}`;
-};
-
-const removeCookie = (key: string, domain: string) => {
-  document.cookie = `${encodeURIComponent(key)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=${domain}`;
-};
-
-// 显示/隐藏cookie提示
-const toggleNoticeVisible = (val?: boolean) => {
-  if (typeof val === 'boolean') {
-    visibleVmodel.value = val;
-  } else {
-    visibleVmodel.value = !visibleVmodel.value;
-  }
-  nextTick(() => {
-    if (!visibleVmodel.value && isZh.value && getCookie(cookieKey.value) !== NOT_SHOW_BUT_AGREED) {
-      setCookie(cookieKey.value, NOT_SHOW_BUT_AGREED, 180, props.cookieDomain ?? location.hostname);
-    }
-  });
-};
-
-// 弹出框是否显示
-const isDlgVisible = ref(false);
-
-// 显示/隐藏弹出框
-const toggleDlgVisible = (val?: boolean) => {
-  if (typeof val === 'boolean') {
-    isDlgVisible.value = val;
-  } else {
-    isDlgVisible.value = !isDlgVisible.value;
-  }
-};
-
-// 是否未签署
-const isNotSigned = () => {
-  if (isZh.value) {
-    return getCookie(cookieKey.value) !== NOT_SHOW_BUT_AGREED;
-  }
-  return (getCookie(cookieKey.value) ?? '0') === NOT_SIGNED;
-};
-
-// 是否全部同意
-const isAllAgreed = () => {
-  if (isZh.value) {
-    return getCookie(cookieKey.value) === NOT_SHOW_BUT_AGREED;
-  }
-  return getCookie(cookieKey.value) === ALL_AGREED;
-};
-
-onMounted(() => {
-  // 未签署，展示cookie notice
-  if (isNotSigned()) {
-    toggleNoticeVisible(true);
-  }
-});
-
-watch(locale, () => {
-  toggleNoticeVisible(isNotSigned());
-});
-
-// 用户同意所有cookie
-const acceptAll = () => {
-  analysisAllowed.value = true;
-  removeCookie(cookieKey.value, props.cookieDomain ?? location.hostname);
-  setCookie(cookieKey.value, ALL_AGREED, 180, props.cookieDomain ?? location.hostname);
-  toggleNoticeVisible(false);
-};
-
-// 用户拒绝所有cookie，即仅同意必要cookie
-const rejectAll = () => {
-  analysisAllowed.value = false;
-  removeCookie(cookieKey.value, props.cookieDomain ?? location.hostname);
-  setCookie(cookieKey.value, NECCESSARY_AGREED, 180, props.cookieDomain ?? location.hostname);
-  toggleNoticeVisible(false);
-};
-
-// 弹出框设置
-const dlgActions = computed<Array<DialogActionT>>(() => {
-  if (isPhone.value) {
-    return [
-      {
-        id: 'save',
-        label: t('cookie.saveSetting'),
-        variant: 'text',
-        onClick: () => {
-          if (analysisAllowed.value) {
-            acceptAll();
-          } else {
-            rejectAll();
-          }
-          toggleDlgVisible(false);
-        },
-      },
-      {
-        id: 'allowAll',
-        label: t('cookie.acceptAll'),
-        variant: 'text',
-        onClick: () => {
-          analysisAllowed.value = true;
-          acceptAll();
-          toggleDlgVisible(false);
-        },
-      },
-    ]
-  }
-  return [
-    {
-      id: 'save',
-      color: 'primary',
-      label: t('cookie.saveSetting'),
-      variant: 'outline',
-      size: 'medium',
-      round: 'pill',
-      onClick: () => {
-        if (analysisAllowed.value) {
-          acceptAll();
-        } else {
-          rejectAll();
-        }
-
-        toggleDlgVisible(false);
-      },
-    },
-    {
-      id: 'allowAll',
-      color: 'primary',
-      label: t('cookie.acceptAll'),
-      variant: 'outline',
-      size: 'medium',
-      round: 'pill',
-      onClick: () => {
-        analysisAllowed.value = true;
-        acceptAll();
-        toggleDlgVisible(false);
-      },
-    },
-  ]
-});
-
-const onDlgChange = (val: boolean) => {
-  if (val) {
-    analysisAllowed.value = isAllAgreed();
-  }
-};
-
-defineExpose({
-  check() {
-    const agreed = isAllAgreed();
-    if (agreed === visibleVmodel.value) {
-      toggleNoticeVisible();
-    }
-  },
-});
-</script>
-
-<template>
-  <ClientOnly>
-    <Teleport :to="wrapper || '#app'">
-      <div ref="cookieNoticeRef" v-if="visibleVmodel" class="cookie-notice">
-        <div class="cookie-notice-content">
-          <div :type="locale" :class="{ 'cookie-notice-wrap-grid': enableGrid, 'cookie-notice-wrap': !enableGrid }">
-            <div class="cookie-title">
-              <template v-if="isZh">
-                <OIcon style="display: inline-block; font-size: 24px; margin-right: 4px">
-                  <svg style="transform: rotate(180deg);" xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
-                    <path fill="#002fa7" d="M21 12c0 4.971-4.029 9-9 9s-9-4.029-9-9c0-4.971 4.029-9 9-9s9 4.029 9 9z" />
-                    <path
-                      fill="#fff"
-                      d="M12 9.4c0.552 0 1-0.448 1-1s-0.448-1-1-1c-0.552 0-1 0.448-1 1s0.448 1 1 1zM12.492 10.943c-0.042-0.233-0.246-0.41-0.492-0.41-0.276 0-0.5 0.224-0.5 0.5v5.5l0.008 0.090c0.042 0.233 0.246 0.41 0.492 0.41 0.276 0 0.5-0.224 0.5-0.5v-5.5l-0.008-0.090z"
-                    />
-                  </svg>
-                </OIcon>
-                <p class="cookie-zh-title" style="margin-top: 0">
-                  {{ t('cookie.desc') }}
-                  <a :href="detailUrl" target="_blank" rel="noopener noreferrer">
-                    {{ t('cookie.about') }}
-                  </a>
-                </p>
-              </template>
-              <p v-else class="cookie-en-title">{{ t('cookie.title', [community]) }}</p>
-              <OIcon class="cookie-notice-close" @click="toggleNoticeVisible(false)">
-                <OIconClose />
-              </OIcon>
-            </div>
-            <div v-if="!isZh" class="cookie-en-content">
-              <p class="cookie-en-desc">
-                {{ t('cookie.desc') }}
-                <a :href="detailUrl" target="_blank" rel="noopener noreferrer">{{ t('cookie.about') }} </a>.
-              </p>
-              <div class="cookie-notice-right">
-                <OButton round="pill" variant="outline" color="primary" @click="acceptAll">{{ t('cookie.acceptAll') }}</OButton>
-                <OButton round="pill" variant="outline" color="primary" @click="rejectAll">{{ t('cookie.rejectAll') }}</OButton>
-                <OButton round="pill" variant="outline" color="primary" @click="toggleDlgVisible(true)">{{ t('cookie.manage') }}</OButton>
-              </div>
-            </div>
-          </div>
-        </div>
-        <ODialog
-          v-model:visible="isDlgVisible"
-          :size="leLaptop ? 'medium' : 'large'"
-          :phone-half-full="lePadV"
-          :main-class="enableGrid ? 'o-cookie-notice-dlg-main' : ''"
-          class="cookie-dlg"
-          :actions="dlgActions"
-          @change="onDlgChange"
-          style="--dlg-radius: 4px"
-        >
-          <template #header>
-            <span class="cookie-dlg-title">{{ t('cookie.manage') }}</span>
-          </template>
-          <div class="cookie-dlg-content">
-            <div class="content-item">
-              <div class="item-header">
-                <span class="item-title">{{ t('cookie.necessaryCookie') }}</span>
-                <span class="item-extra">{{ t('cookie.alwaysOn') }}</span>
-              </div>
-              <div class="item-detail">
-                {{ t('cookie.necessaryCookieDetail') }}
-              </div>
-            </div>
-            <div class="content-item">
-              <div class="item-header">
-                <span class="item-title">{{ t('cookie.analyticalCookie') }}</span>
-                <span class="item-extra">
-                  <OSwitch v-model="analysisAllowed" />
-                </span>
-              </div>
-              <div class="item-detail">
-                {{ t('cookie.analyticalCookieDetail') }}
-              </div>
-            </div>
-          </div>
-        </ODialog>
-      </div>
-    </Teleport>
-  </ClientOnly>
-</template>
-
-<style lang="scss">
-.o-cookie-notice-dlg-main {
-  --dlg-edge-gap: 32px;
-  @include respond('laptop') {
-    --dlg-edge-gap: 24px;
-  }
-  @include respond('phone') {
-    --dlg-edge-gap: 16px 24px;
-  }
-
-  --dlg-width: var(--grid-14);
-  @include respond('pad_h') {
-    --dlg-edge-gap: 16px;
-    --dlg-width: var(--grid-8);
-  }
-  @include respond('<=pad_v') {
-    --dlg-width: 100vw;
-  }
-}
-</style>
-<style lang="scss" scoped>
-.o-btn {
-  --btn-bd-color-hover: var(--o-color-primary2);
-  --btn-bd-color-active: var(--o-color-primary3);
-
-  --btn-color-hover: var(--o-color-primary2);
-  --btn-color-active: var(--o-color-primary3);
-
-  --btn-bg-color-hover: transparent;
-  --btn-bg-color-active: transparent;
-}
-.cookie-notice {
-  position: fixed;
-  bottom: 0;
-  z-index: 999;
-  width: 100%;
-  .o-button {
-    --o-button-font-size-mini: 14px;
-  }
-  .o-button + .o-button {
-    margin-left: 16px;
-
-    @media (max-width: 840px) {
-      margin-left: 0;
-      margin-top: 12px;
-    }
-  }
-}
-
-.cookie-notice-content {
-  background-color: rgba(var(--o-grey-1), 0.9);
-  backdrop-filter: blur(5px);
-  box-shadow: var(--o-shadow-1);
-}
-
-.cookie-notice-wrap {
-  position: relative;
-  margin: 0 auto;
-  padding: 16px var(--layout-content-padding);
-  max-width: var(--layout-content-max-width);
-  @media (1680px >= width >= 1201px) {
-    padding: 12px var(--layout-content-padding);
-  }
-  @include respond('pad_h') {
-    padding: 8px var(--layout-content-padding);
-  }
-  @media (max-width: 840px) {
-    padding: 16px var(--layout-content-padding);
-  }
-  @include respond('phone') {
-    padding: 16px var(--layout-content-padding);
-  }
-  &:not([type='zh']) {
-    @media (max-width: 840px) {
-      flex-direction: column;
-    }
-  }
-}
-
-.cookie-notice-wrap-grid {
-  width: var(--grid-content-width);
-  padding: 16px 0;
-  margin: 0 auto;
-  @media (1680px >= width >= 1201px) {
-    padding: 12px 0;
-  }
-  @include respond('pad_h') {
-    padding: 8px 0;
-  }
-  @media (max-width: 840px) {
-    padding: 16px 0;
-  }
-  @include respond('phone') {
-    padding: 16px 0;
-  }
-  &:not([type='zh']) {
-    @media (max-width: 840px) {
-      padding: 16px 0;
-      flex-direction: column;
-    }
-  }
-}
-
-.cookie-title {
-  display: flex;
-  font-size: 16px;
-  line-height: calc(1em + 8px);
-  color: var(--o-color-info1);
-  font-weight: 500;
-  @media (max-width: 1680px) {
-    font-size: 14px;
-  }
-  @include respond('<=pad_v') {
-    text-align: center;
-  }
-}
-
-.cookie-en-title {
-  @include respond('<=pad_v') {
-    margin-left: auto;
-  }
-}
-
-.cookie-zh-title {
-  font-size: 14px;
-  line-height: 22px;
-  margin-right: 8px;
-  text-align: start;
-  @include respond('<=pad_v') {
-    font-size: 12px;
-    line-height: 18px;
-  }
-}
-
-.cookie-en-content {
-  display: flex;
-  width: 100%;
-  margin-top: 8px;
-  @include respond('<=pad_v') {
-    flex-direction: column;
-  }
-}
-
-.cookie-en-desc {
-  font-size: 12px;
-  line-height: 18px;
-  color: var(--o-color-info2);
-  @media (min-width: 1681px) {
-    margin-right: 48px;
-  }
-  @media (1680px >= width >= 1201px) {
-    margin-right: 40px;
-  }
-  @include respond('pad') {
-    margin-right: 24px;
-  }
-  @include respond('<=pad_v') {
-    margin: 0;
-  }
-}
-
-.cookie-notice-right {
-  display: flex;
-  margin-left: auto;
-
-  .o-btn:not(:first-child) {
-    margin-left: 16px;
-    @media (1680px >= width >= 1201px) {
-      margin-left: 12px;
-    }
-    @include respond('pad_h') {
-      margin-left: 8px;
-    }
-    @media (min-width: 841px) {
-      margin-left: 12px;
-    }
-  }
-
-  @include respond('<=pad_v') {
-    margin-top: 16px;
-    width: 100%;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto auto;
-    gap: 12px;
-
-    .o-btn {
-      margin: 0;
-      &:nth-child(1) {
-        grid-column: 1;
-        grid-row: 1;
-      }
-      &:nth-child(2) {
-        grid-column: 2;
-        grid-row: 1;
-      }
-      &:nth-child(3) {
-        grid-column: 1 / span 2;
-        grid-row: 2;
-      }
-    }
-  }
-}
-
-.cookie-notice-close {
-  display: block;
-  overflow: visible !important;
-  margin-left: auto;
-  cursor: pointer;
-  color: var(--o-color-info1);
-  font-size: 24px;
-  &:hover {
-    color: var(--o-color-primary2);
-  }
-  @include x-svg-hover;
-}
-
-.cookie-dlg-content {
-  .content-item + .content-item {
-    margin-top: 24px;
-    @media (1680px >= width >= 1201px) {
-      margin-top: 16px;
-    }
-    @include respond('<=pad') {
-      margin-top: 12px;
-    }
-  }
-
-  .content-item {
-    .item-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .item-title {
-        font-size: 20px;
-        line-height: calc(1em + 8px);
-        color: var(--o-color-info1);
-        font-weight: 500;
-        @media (1680px >= width >= 1201px) {
-          font-size: 18px;
-        }
-        @include respond('<=pad') {
-          font-size: 16px;
-        }
-      }
-
-      .item-extra {
-        font-size: 14px;
-        color: var(--o-color-info3);
-        margin-left: 24px;
-        @include respond('<=pad') {
-          font-size: 12px;
-        }
-      }
-    }
-
-    .item-detail {
-      font-size: 16px;
-      line-height: calc(1em + 8px);
-      color: var(--o-color-info2);
-      margin-top: 16px;
-      @media (max-width: 1680px) {
-        margin-top: 12px;
-        font-size: 14px;
-      }
-      @include respond('<=pad') {
-        margin-top: 8px;
-      }
-      @media (max-width: 840px) {
-        margin-top: 8px;
-      }
-    }
-  }
-
-  .content-item:nth-child(2) {
-    .item-detail {
-      font-size: 16px !important;
-      line-height: calc(1em + 8px);
-    }
-  }
-}
-</style>

package/src/components/cookie-notice/index.ts

@@ -1,10 +0,0 @@
-import _OCookieNotice from './OCookieNotice.vue';
-import type { App } from 'vue';
-
-const OCookieNotice = Object.assign(_OCookieNotice, {
-  install(app: App) {
-    app.component('OCookieNotice', _OCookieNotice);
-  },
-});
-
-export { OCookieNotice };