@opendesign-plus/components 0.0.1-rc.2 → 0.0.1-rc.20

package/src/components/OSourceCode.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OIcon, ODropdown, ODropdownItem } from '@opensig/opendesign';
+
+import IconChevronDown from '~icons/components/icon-chevron-down.svg';
+
+interface CodeItemT {
+  label: string;
+  url: string;
+  icon?: string;
+}
+
+interface CodePropsT {
+  title?: string;
+  options?: CodeItemT[];
+  url?: string;
+  icon?: string;
+  justify?: string;
+}
+
+withDefaults(defineProps<CodePropsT>(), {
+  title: undefined,
+  options: undefined,
+  url: undefined,
+  icon: undefined,
+  justify: 'center',
+});
+
+const itemChange = (data: any) => {
+  window.open(data.url, '_blank');
+};
+
+const dropdownVisible = ref(false);
+const visibleChange = (val: boolean) => {
+  dropdownVisible.value = val;
+};
+</script>
+
+<template>
+  <div class="source-code">
+    <div v-if="url" class="info-wrap" @click="itemChange({ url: url })">
+      <span class="title">{{ title }}</span>
+      <OIcon v-if="icon">
+        <component :is="icon" class="icon" />
+      </OIcon>
+    </div>
+    <ODropdown
+      v-else
+      trigger="hover"
+      optionPosition="bottom"
+      option-wrap-class="dropdown"
+      :class="{ 'dropdown-active': dropdownVisible }"
+      @visible-change="visibleChange"
+    >
+      <div class="info-wrap hover-icon-rotate">
+        <span class="title">{{ title }}</span>
+        <OIcon class="icon"><IconChevronDown /></OIcon>
+      </div>
+      <template #dropdown>
+        <ODropdownItem v-for="item in options" @click="itemChange(item)" :key="item.url" class="list" :style="{ '--dropdown-item-justify': justify }">
+          {{ item.label }}
+          <OIcon v-if="item.icon">
+            <component :is="item.icon" class="icon" />
+          </OIcon>
+        </ODropdownItem>
+      </template>
+    </ODropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.source-code {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  .info-wrap {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: var(--o-color-info1);
+    cursor: pointer;
+
+    @include hover {
+      color: var(--o-color-primary1);
+    }
+
+    .title {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      height: 100%;
+      @include tip1;
+    }
+  }
+  .list {
+    background: var(--o-color-fill2);
+    cursor: pointer;
+    box-shadow: var(--o-shadow-1);
+    border-radius: var(--o-radius_control-xs);
+    padding: var(--o-gap-1);
+    width: 144px;
+  }
+}
+
+.hover-icon-rotate {
+  .o-icon {
+    transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+  }
+
+  @include hover {
+    .o-icon {
+      transform: rotate(-180deg);
+    }
+  }
+}
+.icon {
+  font-size: var(--o-icon_size_control-xs);
+  margin-left: var(--o-gap-1);
+}
+.o-dropdown {
+  height: 100%;
+}
+.dropdown-active {
+  .info-wrap {
+    color: var(--o-color-primary1);
+  }
+  .o-icon {
+    transform: rotate(-180deg);
+  }
+}
+.o-dropdown-item {
+  background: var(--o-color-fill2);
+  cursor: pointer;
+  border-radius: var(--o-radius_control-xs);
+  padding: var(--o-gap-1) 12px;
+  min-width: 144px;
+  height: 32px;
+  @include tip1;
+
+  @include hover {
+    background: var(--o-color-control2-light);
+  }
+
+  &:active {
+    color: var(--o-color-primary1);
+    background: var(--o-color-control3-light);
+    font-weight: 600;
+  }
+}
+.dropdown {
+  --dropdown-list-radius: var(--o-radius-xs);
+}
+</style>

package/src/components/OThemeSwitcher.vue

@@ -1,108 +1,108 @@
-<script lang="ts" setup>
-import { Component, computed } from 'vue';
-import { OIcon, OSwitch } from '@opensig/opendesign';
-import { useScreen } from '@opendesign-plus/composables';
-
-import IconSun from '~icons/components/icon-sun.svg';
-import IconMoon from '~icons/components/icon-moon.svg';
-
-export interface OThemeSwitcherPropsT {
-  theme?: string;
-  type?: 'auto' | 'common' | 'mobile';
-  lightValue?: string;
-  darkValue?: string;
-  lightIcon?: Component;
-  darkIcon?: Component;
-}
-
-export interface OThemeSwitcherEmitsT {
-  (e: 'update:theme', value: string): void;
-  (e: 'change', val: string): void;
-}
-
-const props = withDefaults(defineProps<OThemeSwitcherPropsT>(), {
-  theme: 'light',
-  type: 'auto',
-  lightValue: 'light',
-  darkValue: 'dark',
-  lightIcon: IconSun,
-  darkIcon: IconMoon,
-});
-
-const emit = defineEmits<OThemeSwitcherEmitsT>();
-
-const { gtPhone } = useScreen();
-
-const switchVal = computed({
-  get() {
-    return props.theme;
-  },
-  set(val) {
-    emit('update:theme', val);
-    emit('change', val);
-  },
-});
-
-const isCommon = computed(() => {
-  return props.type === 'common' || (props.type === 'auto' && gtPhone.value);
-});
-
-const toggleTheme = () => {
-  switchVal.value = switchVal.value === props.lightValue ? props.darkValue : props.lightValue;
-};
-</script>
-
-<template>
-  <div class="o-theme-switcher">
-    <div v-if="isCommon" class="o-theme-switcher-common" @click="toggleTheme">
-      <OIcon class="o-theme-icon">
-        <IconMoon v-if="switchVal === lightValue" />
-        <IconSun v-else />
-      </OIcon>
-    </div>
-
-    <div v-else class="o-theme-switcher-mobile">
-      <OSwitch v-model="switchVal" class="o-theme-switch" :checked-value="darkValue" :unchecked-value="lightValue">
-        <template #on>
-          <OIcon class="o-theme-icon">
-            <IconSun />
-          </OIcon>
-        </template>
-        <template #off>
-          <OIcon class="o-theme-icon">
-            <IconMoon />
-          </OIcon>
-        </template>
-      </OSwitch>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.o-theme-switcher-common {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-
-  .o-theme-icon {
-    font-size: 24px;
-    color: var(--o-color-info1);
-
-    @include hover {
-      color: var(--o-color-primary1);
-    }
-  }
-}
-
-.o-theme-switcher-mobile {
-  .o-theme-switch {
-    background-color: var(--o-color-control1-light);
-
-    .o-theme-icon {
-      color: var(--o-color-white);
-    }
-  }
-}
-</style>
+<script lang="ts" setup>
+import { Component, computed } from 'vue';
+import { OIcon, OSwitch } from '@opensig/opendesign';
+import { useScreen } from '@opendesign-plus/composables';
+
+import IconSun from '~icons/components/icon-sun.svg';
+import IconMoon from '~icons/components/icon-moon.svg';
+
+export interface OThemeSwitcherPropsT {
+  theme?: string;
+  type?: 'auto' | 'common' | 'mobile';
+  lightValue?: string;
+  darkValue?: string;
+  lightIcon?: Component;
+  darkIcon?: Component;
+}
+
+export interface OThemeSwitcherEmitsT {
+  (e: 'update:theme', value: string): void;
+  (e: 'change', val: string): void;
+}
+
+const props = withDefaults(defineProps<OThemeSwitcherPropsT>(), {
+  theme: 'light',
+  type: 'auto',
+  lightValue: 'light',
+  darkValue: 'dark',
+  lightIcon: IconSun,
+  darkIcon: IconMoon,
+});
+
+const emit = defineEmits<OThemeSwitcherEmitsT>();
+
+const { gtPhone } = useScreen();
+
+const switchVal = computed({
+  get() {
+    return props.theme;
+  },
+  set(val) {
+    emit('update:theme', val);
+    emit('change', val);
+  },
+});
+
+const isCommon = computed(() => {
+  return props.type === 'common' || (props.type === 'auto' && gtPhone.value);
+});
+
+const toggleTheme = () => {
+  switchVal.value = switchVal.value === props.lightValue ? props.darkValue : props.lightValue;
+};
+</script>
+
+<template>
+  <div class="o-theme-switcher">
+    <div v-if="isCommon" class="o-theme-switcher-common" @click="toggleTheme">
+      <OIcon class="o-theme-icon">
+        <IconMoon v-if="switchVal === lightValue" />
+        <IconSun v-else />
+      </OIcon>
+    </div>
+
+    <div v-else class="o-theme-switcher-mobile">
+      <OSwitch v-model="switchVal" class="o-theme-switch" :checked-value="darkValue" :unchecked-value="lightValue">
+        <template #on>
+          <OIcon class="o-theme-icon">
+            <IconSun />
+          </OIcon>
+        </template>
+        <template #off>
+          <OIcon class="o-theme-icon">
+            <IconMoon />
+          </OIcon>
+        </template>
+      </OSwitch>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.o-theme-switcher-common {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+
+  .o-theme-icon {
+    font-size: 24px;
+    color: var(--o-color-info1);
+
+    @include hover {
+      color: var(--o-color-primary1);
+    }
+  }
+}
+
+.o-theme-switcher-mobile {
+  .o-theme-switch {
+    background-color: var(--o-color-control1-light);
+
+    .o-theme-icon {
+      color: var(--o-color-white);
+    }
+  }
+}
+</style>