feat(projects): 1.0 beta

src/components/common/lang-switch.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'LangSwitch'
+});
+
+interface Props {
+  /**
+   * current language
+   */
+  lang: App.I18n.LangType;
+  /**
+   * language options
+   */
+  langOptions: App.I18n.LangOption[];
+  /**
+   * show tooltip
+   */
+  showTooltip?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showTooltip: true
+});
+
+type Emits = {
+  (e: 'changeLang', lang: App.I18n.LangType): void;
+};
+
+const emits = defineEmits<Emits>();
+
+const tooltipContent = computed(() => {
+  if (!props.showTooltip) return '';
+
+  return $t('icon.lang');
+});
+
+function changeLang(lang: App.I18n.LangType) {
+  emits('changeLang', lang);
+}
+</script>
+
+<template>
+  <NDropdown :value="lang" :options="langOptions" trigger="hover" @select="changeLang">
+    <div>
+      <ButtonIcon :tooltip-content="tooltipContent" tooltip-placement="left">
+        <SvgIcon icon="heroicons:language" />
+      </ButtonIcon>
+    </div>
+  </NDropdown>
+</template>
+
+<style scoped></style>