feat: irene calculator (#239)

package.json

@@ -15,6 +15,7 @@
  "browser-image-resizer": "^2.4.1",
  "comlink": "^4.4.1",
  "core-js": "^3.31.1",
+ "dayjs": "^1.11.9",
  "encoding-japanese": "^2.0.0",
  "eventemitter3": "^5.0.1",
  "idb-keyval": "^6.2.1",
@@ -37,7 +38,8 @@
  "vue-gtag": "^1.16.1",
  "vue-i18n": "^8.28.2",
  "vue-observe-visibility": "^1.0.0",
- "vue-router": "^3.6.5"
+ "vue-router": "^3.6.5",
+ "vue2-teleport": "^1.0.1"
  },
  "devDependencies": {
  "@actions/core": "^1.10.0",

src/App.vue

@@ -482,12 +482,15 @@ a {
  &-wrap {
  flex-wrap: wrap;
  }
+ &-no-wrap {
+ flex-wrap: nowrap;
+ }
 }
 .block {
  display: block !important;
 }
 .inline-block {
- display: inline-block;
+ display: inline-block !important;
 }
 .opacity-0 {
  opacity: 0 !important;

src/components/InfoHoverTip.vue

@@ -0,0 +1,22 @@
+<template>
+ <i class="mdui-icon material-icons help no-sl" :mdui-tooltip="tooltip">{{
+ $root.dark ? 'info' : 'info_outline'
+ }}</i>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+ content: {
+ type: String,
+ default: '',
+ },
+ position: {
+ type: String,
+ default: 'top',
+ },
+});
+
+const tooltip = computed(() => `{content:'${props.content}',position:'${props.position}'}`);
+</script>

src/components/LazyDialog.vue

@@ -0,0 +1,51 @@
+<template>
+ <component
+ v-if="isOpen"
+ ref="dialogRef"
+ :is="component"
+ v-bind="$attrs"
+ v-on="$listeners"
+ @closed="handleClosed"
+ ><slot></slot
+ ></component>
+</template>
+
+<script setup>
+import { getWrapper } from '@/mixins/mduiDialog';
+import { sleep } from '@/utils/common';
+import { ref } from 'vue';
+
+defineProps({ component: Object });
+const emit = defineEmits(['full-closed']);
+
+const isOpen = ref(false);
+const dialogRef = ref();
+
+const wrapper = getWrapper(dialogRef);
+
+let isClosing = false;
+
+const handleClosed = async () => {
+ if (wrapper.isTempClose()) return;
+ isClosing = true;
+ await sleep();
+ isOpen.value = false;
+ isClosing = false;
+ emit('full-closed');
+};
+
+const open = async (...args) => {
+ if (isClosing) return;
+ isOpen.value = true;
+ await sleep();
+ wrapper.open(...args);
+};
+
+const close = async (...args) => {
+ wrapper.close(...args);
+};
+
+const toggle = (...args) => (isOpen.value ? close(...args) : open(...args));
+
+defineExpose({ ...wrapper, open, close, toggle });
+</script>

src/components/SimpleAlert.vue

@@ -0,0 +1,111 @@
+<template>
+ <Teleport v-if="isShow" to="body">
+ <div
+ class="simple-alert-overlay"
+ :class="{ 'simple-alert-overlay-show': isShowAnimation }"
+ @transitionend="handleOverlayTransitionEnd"
+ @click.self="close"
+ >
+ <div
+ class="simple-alert mdui-dialog mdui-dialog-alert"
+ :class="{ 'mdui-dialog-open': isShowAnimation }"
+ @transitionend="handleDialogTransitionEnd"
+ >
+ <div class="mdui-dialog-content mdui-p-b-0" v-html="html"></div>
+ <div class="mdui-dialog-actions">
+ <a
+ href="javascript:void(0)"
+ class="mdui-btn mdui-ripple mdui-text-color-primary"
+ @click="close"
+ >{{ $t('common.close') }}</a
+ >
+ </div>
+ </div>
+ </div>
+ </Teleport>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { sleep } from '@/utils/common';
+
+defineProps({
+ html: String,
+});
+
+const isShow = ref(false);
+const isShowAnimation = ref(false);
+
+let resolveOverlayTransition;
+let resolveDialogTransition;
+
+const handleOverlayTransitionEnd = () => {
+ if (isShowAnimation.value) return;
+ resolveOverlayTransition?.();
+};
+
+const handleDialogTransitionEnd = () => {
+ if (isShowAnimation.value) return;
+ resolveDialogTransition?.();
+};
+
+const open = async () => {
+ if (isShow.value) return;
+ isShow.value = true;
+ await sleep();
+ isShowAnimation.value = true;
+};
+const close = async () => {
+ if (!isShowAnimation.value) return;
+ const promises = [
+ new Promise(resolve => {
+ resolveOverlayTransition = () => {
+ resolve();
+ resolveOverlayTransition = null;
+ };
+ }),
+ new Promise(resolve => {
+ resolveDialogTransition = () => {
+ resolve();
+ resolveDialogTransition = null;
+ };
+ }),
+ ];
+ isShowAnimation.value = false;
+ await Promise.race([Promise.all(promises), sleep(500)]);
+ isShow.value = false;
+};
+
+defineExpose({ open, close });
+</script>
+
+<style lang="scss" scoped>
+.simple-alert {
+ display: block;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: fit-content;
+ max-width: 560px;
+ margin: auto;
+ opacity: 1;
+ &-overlay {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0.4);
+ opacity: 0;
+ transition-duration: 0.3s;
+ transition-property: opacity;
+ backface-visibility: hidden;
+ z-index: 8000;
+ &-show {
+ opacity: 1;
+ }
+ }
+}
+</style>

src/components/global/MduiNumberInput.vue

@@ -1,14 +1,12 @@
 <template>
  <div class="mdui-textfield mdui-p-y-0" :class="{ 'mdui-textfield-disabled': disabled }">
- <label class="mdui-textfield-label no-sl">
- <slot></slot>
- </label>
+ <label class="mdui-textfield-label no-sl"><slot></slot></label>
  <input
  class="mdui-textfield-input mdui-p-y-0"
  type="number"
  :value="value"
  :disabled="disabled"
- @input="$emit('input', $event.target.value)"
+ @input="$emit('input', format($event.target.value))"
  min="0"
  step="1"
  :placeholder="placeholder"
@@ -17,18 +15,26 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
  name: 'mdui-number-input',
  model: {
  prop: 'value',
  event: 'input',
  },
  props: {
  value: [Number, String],
- placeholder: String,
+ placeholder: [Number, String],
  disabled: Boolean,
  },
-};
+ methods: {
+ format(value) {
+ if (!value) return '';
+ return String(Math.max(0, Math.floor(Number(value || 0))));
+ },
+ },
+});
 </script>
 
 <style scoped>

src/components/global/MduiSelectNum.vue

@@ -1,7 +1,7 @@
 <template>
  <select
  class="mdui-select"
- :mdui-select="mduiOptions ? JSON.stringify(mduiOptions) : ''"
+ :mdui-select="disableJs ? undefined : mduiOptions ? JSON.stringify(mduiOptions) : ''"
  :value="value"
  @change="$emit('change', parseInt($event.target.value))"
  >
@@ -19,6 +19,7 @@ export default {
  value: [Number, String],
  options: Array,
  mduiOptions: Object,
+ disableJs: Boolean,
  },
 };
 </script>

src/components/global/MduiSwitch.vue

@@ -1,14 +1,14 @@
 <template>
- <label class="mdui-switch">
+ <label class="mdui-switch" :class="{ 'mdui-switch-truncate': truncate }">
  <input
  type="checkbox"
  :checked="checked"
  :disabled="disabled"
  @change="$emit('change', $event.target.checked)"
  />
  <i class="mdui-switch-icon mdui-m-r-1"></i>
- <span v-if="html" v-html="html"></span>
- <span v-else>
+ <span v-if="html" v-html="html" :class="{ 'mdui-text-truncate': truncate }"></span>
+ <span v-else :class="{ 'mdui-text-truncate': truncate }">
  <slot></slot>
  </span>
  </label>
@@ -25,6 +25,15 @@ export default {
  checked: Boolean,
  html: String,
  disabled: Boolean,
+ truncate: Boolean,
  },
 };
 </script>
+
+<style>
+.mdui-switch-truncate .mdui-text-truncate {
+ display: inline-block;
+ vertical-align: bottom;
+ max-width: calc(100% - 44px);
+}
+</style>

src/components/material/AccountManageDialog.vue

@@ -58,7 +58,7 @@
 
 <script>
 import { ref, defineComponent } from 'vue';
-import { MDUI_DIALOG_PROPS, MDUI_DIALOG_EMITS, useMduiDialog } from '@/mixins/mduiDialog';
+import { MDUI_DIALOG_EMITS, useMduiDialog } from '@/mixins/mduiDialog';
 import { DEFAULT_ID } from '@/utils/MultiAccount';
 import { locales } from '@/constant/lang';
 
@@ -69,7 +69,6 @@ const SERVER_OPTIONS = [
 
 export default defineComponent({
  props: {
- ...MDUI_DIALOG_PROPS,
  accountList: {
  type: Array,
  default: () => [],
@@ -82,12 +81,12 @@ export default defineComponent({
  DEFAULT_ID,
  SERVER_OPTIONS,
  dialogRef,
- ...useMduiDialog(props, context.emit, dialogRef),
+ ...useMduiDialog(context.emit, dialogRef),
  };
  },
  methods: {
  editName(item) {
- this.close();
+ this.tempClose();
  this.$prompt(
  this.$t('common.name'),
  this.$t('cultivate.multiAccount.editName'),
@@ -115,7 +114,7 @@ export default defineComponent({
  },
  deleteAccount(item) {
  if (item.id === DEFAULT_ID) return;
- this.close();
+ this.tempClose();
  this.$confirm(
  this.$t('cultivate.multiAccount.deleteConfirm', [item.name]),
  () => {