zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate overview list item selection sheet to composition API and typescript

Browse Source
This commit is contained in:
MaysWind
2025-01-12 00:03:01 +08:00
parent 395f7dfd63
commit 75a96e871a
1 changed files with 87 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/ListItemSelectionSheet.vue
+87 -85
View File
@@ -6,24 +6,24 @@
<div class="swipe-handler"></div>
<div class="left"></div>
<div class="right">
<f7-link sheet-close :text="$t('Done')"></f7-link>
<f7-link sheet-close :text="tt('Done')"></f7-link>
</div>
</f7-toolbar>
<f7-page-content>
<f7-list dividers class="no-margin-vertical">
<f7-list-item link="#" no-chevron
:title="$tIf((titleField ? item[titleField] : item), titleI18n)"
:title="ti((titleField ? (item as Record<string, unknown>)[titleField] : item) as string, !!titleI18n)"
:value="getItemValue(item, index, valueField, valueType)"
:class="{ 'list-item-selected': isSelected(item, index) }"
:key="getItemValue(item, index, keyField, valueType)"
v-for="(item, index) in items"
v-show="item && (!hiddenField || !item[hiddenField])"
v-show="item && (!hiddenField || !(item as Record<string, unknown>)[hiddenField])"
@click="onItemClicked(item, index)">
<template #content-start>
<f7-icon class="list-item-checked-icon" f7="checkmark_alt" :style="{ 'color': isSelected(item, index) ? '' : 'transparent' }"></f7-icon>
</template>
<template #media v-if="iconField">
<ItemIcon :icon-type="iconType" :icon-id="item[iconField]" :color="item[colorField]"></ItemIcon>
<ItemIcon :icon-type="iconType" :icon-id="(item as Record<string, unknown>)[iconField]" :color="colorField ? (item as Record<string, unknown>)[colorField] : undefined"></ItemIcon>
</template>
</f7-list-item>
</f7-list>
@@ -31,93 +31,95 @@
</f7-sheet>
</template>
<script>
import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
<script setup lang="ts">
import { ref, computed } from 'vue';
export default {
props: [
'modelValue',
'valueType', // item or index
'keyField', // for value type == item
'valueField', // for value type == item
'titleField',
'titleI18n',
'iconField',
'iconType',
'colorField',
'hiddenField',
'items',
'show'
],
emits: [
'update:modelValue',
'update:show'
],
data() {
const self = this;
import { useI18n } from '@/locales/helpers.ts';
return {
currentValue: self.modelValue
}
},
computed: {
heightClass() {
if (this.items.length > 10) {
return 'list-item-selection-huge-sheet';
} else if (this.items.length > 6) {
return 'list-item-selection-large-sheet';
} else {
return '';
}
}
},
methods: {
getItemValue(item, index, fieldName, valueType) {
if (valueType === 'index') {
return index;
} else if (fieldName) {
return item[fieldName];
} else {
return item;
}
},
onItemClicked(item, index) {
if (this.valueType === 'index') {
this.currentValue = index;
} else {
if (this.valueField) {
this.currentValue = item[this.valueField];
} else {
this.currentValue = item;
}
}
import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
this.$emit('update:modelValue', this.currentValue);
this.close();
},
onSheetOpen(event) {
this.currentValue = this.modelValue;
scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
},
onSheetClosed() {
this.close();
},
isSelected(item, index) {
if (this.valueType === 'index') {
return this.currentValue === index;
} else {
if (this.valueField) {
return this.currentValue === item[this.valueField];
} else {
return this.currentValue === item;
}
}
},
close() {
this.$emit('update:show', false);
const props = defineProps<{
modelValue: unknown;
valueType: string; // item or index
keyField?: string; // for value type == item
valueField?: string; // for value type == item
titleField: string;
titleI18n?: boolean;
iconField?: string;
iconType?: string;
colorField?: string;
hiddenField?: string;
items: unknown[];
show: boolean;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: unknown): void;
(e: 'update:show', value: boolean): void;
}>();
const { tt, ti } = useI18n();
const currentValue = ref<unknown>(props.modelValue);
const heightClass = computed<string>(() => {
if (props.items.length > 10) {
return 'list-item-selection-huge-sheet';
} else if (props.items.length > 6) {
return 'list-item-selection-large-sheet';
} else {
return '';
}
});
function isSelected(item: unknown, index: number): boolean {
if (props.valueType === 'index') {
return currentValue.value === index;
} else {
if (props.valueField) {
return currentValue.value === (item as Record<string, unknown>)[props.valueField];
} else {
return currentValue.value === item;
}
}
}
function getItemValue(item: unknown, index: number, fieldName: string | undefined, valueType: string): unknown {
if (valueType === 'index') {
return index;
} else if (fieldName) {
return (item as Record<string, unknown>)[fieldName];
} else {
return item;
}
}
function close() {
emit('update:show', false);
}
function onItemClicked(item: unknown, index: number): void {
if (props.valueType === 'index') {
currentValue.value = index;
} else {
if (props.valueField) {
currentValue.value = (item as Record<string, unknown>)[props.valueField];
} else {
currentValue.value = item;
}
}
emit('update:modelValue', currentValue.value);
close();
}
function onSheetOpen(event: { $el: Framework7Dom }): void {
currentValue.value = props.modelValue;
scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
}
function onSheetClosed(): void {
close();
}
</script>
<style>