@sigmaott/base-library-next 2.2.5 → 2.2.7

package/src/components/ProfileModify.vue

@@ -1,152 +1,152 @@
-<script lang="ts" setup>
-import { serializePreset } from '../utils/preset'
-import type { CreateProfileDto } from '../api-client-library'
-
-const props = withDefaults(defineProps<{
-  mode: 'create' | 'edit' | 'clone' // why so much mode?
-  needSubmit: boolean
-  prop?: string
-  item?: CreateProfileDto | null
-  isPackage?: boolean
-}>(), { needSubmit: true })
-
-const emit = defineEmits<{
-  close: []
-  submit: [profile: CreateProfileDto]
-}>()
-
-const item = toRef(props, 'item')
-
-const activeMedia = ref()
-
-const initFields = ref<any>({
-  name: '',
-  video: [],
-  audio: [],
-  other: [],
-  presets: [],
-})
-const fields = ref(klona(initFields.value))
-
-if (props.prop)
-  useSyncElForm(props.prop, { formValue, formErrors, submitLocks, formRef })
-
-watchEffect(() => {
-  if (props.item) {
-    initFields.value = klona(item.value)
-    fields.value = klona(item.value)
-    activeMedia.value = 'media-0'
-  }
-})
-
-const { createProfileMutation, updateProfileMutation, isMutationLoading } = useProfileMutation()
-
-const { t } = useI18n()
-const { formRef, formValue, handleSubmit, handleValidate, formErrors, getAtrrs, submitLocks } = useElForm<any>({
-  initialValues: fields,
-  async onSubmit(values) {
-    if (props.mode === 'create') {
-      await createProfileMutation.mutateAsync(serializeData(fields.value))
-      ElMessage.success(t('library_profile.profile_added_successfully'))
-      handleReset()
-      formRef.value?.resetFields()
-    }
-
-    if (props.mode === 'edit') {
-      await updateProfileMutation.mutateAsync({
-        id: fields.value.id,
-        updateProfileDto: serializeData(fields.value),
-      })
-      ElMessage.success(t('library_profile.profile_updated_successfully'))
-    }
-
-    if (props.mode === 'clone') {
-      await createProfileMutation.mutateAsync(serializeData(fields.value))
-      ElMessage.success(t('library_profile.profile_cloned_successfully'))
-    }
-
-    emit('close')
-    emit('submit', serializeData(fields.value))
-    try {
-      // switch (props.mode) {
-      //   case 'create': {
-      //     res = await createProfile(payload)
-      //     if (res) {
-      //       ElMessage.success('Add successful')
-      //       emit('added', res)
-      //     }
-      //     break
-      //   }
-      //   case 'edit': {
-      //     let parsed = serializeData(fields.value)
-      //     parsed = { ...parsed, ...{ id: fields.value.id } }
-      //     res = await updateProfile(parsed)
-      //     if (res) {
-      //       ElMessage.success('Update successful')
-      //       emit('updated', res)
-      //     }
-      //     break
-      //   }
-      //   case 'clone': {
-      //     const payload = serializeData(fields.value)
-      //     res = await createProfile(payload)
-      //     if (res) {
-      //       ElMessage.success('Clone successful')
-      //       emit('cloned', res)
-      //     }
-      //     break
-      //   }
-      //   default:
-      //     break
-      // }
-    }
-    catch (error) {
-    }
-  },
-})
-
-function handleReset() {
-  fields.value = klona(initFields.value)
-}
-
-function handleCancel() {
-  emit('close')
-}
-
-function serializeData(data: any) {
-  const { name, description, presets = [] } = data
-  const serializedPresets = presets.map((item) => {
-    return serializePreset(item)
-  })
-  return {
-    name,
-    description,
-    presets: serializedPresets,
-  }
-}
-</script>
-
-<template>
-  <el-form
-    ref="formRef" label-position="top" label-width="80px" :model="formValue"
-    @validate="handleValidate"
-  >
-    <ProfileConfigItem v-model:activeMedia="activeMedia" :is-package="isPackage">
-      <template #default>
-        <slot name="input" :fields="fields" :get-atrrs="getAtrrs" />
-      </template>
-    </ProfileConfigItem>
-    <div v-if="needSubmit" class="mt-4 w-full flex justify-end">
-      <!-- <el-button :disabled="isMutationLoading" @click="handleReset">
-          {{ $t('library_action.reset') }}
-        </el-button> -->
-
-      <el-button type="primary" plain :disabled="isMutationLoading" @click="handleCancel">
-        {{ $t('library_action.cancel') }}
-      </el-button>
-      <el-button :loading="isMutationLoading" type="primary" @click="handleSubmit">
-        {{ $t('library_action.submit') }}
-      </el-button>
-    </div>
-  </el-form>
-</template>
+<script lang="ts" setup>
+import { serializePreset } from '../utils/preset'
+import type { CreateProfileDto } from '../api-client-library'
+
+const props = withDefaults(defineProps<{
+  mode: 'create' | 'edit' | 'clone' // why so much mode?
+  needSubmit: boolean
+  prop?: string
+  item?: CreateProfileDto | null
+  isPackage?: boolean
+}>(), { needSubmit: true })
+
+const emit = defineEmits<{
+  close: []
+  submit: [profile: CreateProfileDto]
+}>()
+
+const item = toRef(props, 'item')
+
+const activeMedia = ref()
+
+const initFields = ref<any>({
+  name: '',
+  video: [],
+  audio: [],
+  other: [],
+  presets: [],
+})
+const fields = ref(klona(initFields.value))
+
+if (props.prop)
+  useSyncElForm(props.prop, { formValue, formErrors, submitLocks, formRef })
+
+watchEffect(() => {
+  if (props.item) {
+    initFields.value = klona(item.value)
+    fields.value = klona(item.value)
+    activeMedia.value = 'media-0'
+  }
+})
+
+const { createProfileMutation, updateProfileMutation, isMutationLoading } = useProfileMutation()
+
+const { t } = useI18n()
+const { formRef, formValue, handleSubmit, handleValidate, formErrors, getAtrrs, submitLocks } = useElForm<any>({
+  initialValues: fields,
+  async onSubmit(values) {
+    if (props.mode === 'create') {
+      await createProfileMutation.mutateAsync(serializeData(fields.value))
+      ElMessage.success(t('library_profile.profile_added_successfully'))
+      handleReset()
+      formRef.value?.resetFields()
+    }
+
+    if (props.mode === 'edit') {
+      await updateProfileMutation.mutateAsync({
+        id: fields.value.id,
+        updateProfileDto: serializeData(fields.value),
+      })
+      ElMessage.success(t('library_profile.profile_updated_successfully'))
+    }
+
+    if (props.mode === 'clone') {
+      await createProfileMutation.mutateAsync(serializeData(fields.value))
+      ElMessage.success(t('library_profile.profile_cloned_successfully'))
+    }
+
+    emit('close')
+    emit('submit', serializeData(fields.value))
+    try {
+      // switch (props.mode) {
+      //   case 'create': {
+      //     res = await createProfile(payload)
+      //     if (res) {
+      //       ElMessage.success('Add successful')
+      //       emit('added', res)
+      //     }
+      //     break
+      //   }
+      //   case 'edit': {
+      //     let parsed = serializeData(fields.value)
+      //     parsed = { ...parsed, ...{ id: fields.value.id } }
+      //     res = await updateProfile(parsed)
+      //     if (res) {
+      //       ElMessage.success('Update successful')
+      //       emit('updated', res)
+      //     }
+      //     break
+      //   }
+      //   case 'clone': {
+      //     const payload = serializeData(fields.value)
+      //     res = await createProfile(payload)
+      //     if (res) {
+      //       ElMessage.success('Clone successful')
+      //       emit('cloned', res)
+      //     }
+      //     break
+      //   }
+      //   default:
+      //     break
+      // }
+    }
+    catch (error) {
+    }
+  },
+})
+
+function handleReset() {
+  fields.value = klona(initFields.value)
+}
+
+function handleCancel() {
+  emit('close')
+}
+
+function serializeData(data: any) {
+  const { name, description, presets = [] } = data
+  const serializedPresets = presets.map((item) => {
+    return serializePreset(item)
+  })
+  return {
+    name,
+    description,
+    presets: serializedPresets,
+  }
+}
+</script>
+
+<template>
+  <el-form
+    ref="formRef" label-position="top" label-width="80px" :model="formValue"
+    @validate="handleValidate"
+  >
+    <ProfileConfigItem v-model:activeMedia="activeMedia" :is-package="isPackage">
+      <template #default>
+        <slot name="input" :fields="fields" :get-atrrs="getAtrrs" />
+      </template>
+    </ProfileConfigItem>
+    <div v-if="needSubmit" class="mt-4 w-full flex justify-end">
+      <!-- <el-button :disabled="isMutationLoading" @click="handleReset">
+          {{ $t('library_action.reset') }}
+        </el-button> -->
+
+      <el-button type="primary" plain :disabled="isMutationLoading" @click="handleCancel">
+        {{ $t('library_action.cancel') }}
+      </el-button>
+      <el-button :loading="isMutationLoading" type="primary" @click="handleSubmit">
+        {{ $t('library_action.submit') }}
+      </el-button>
+    </div>
+  </el-form>
+</template>

package/src/components/ProfileTable.vue

@@ -1,68 +1,68 @@
-<script lang="ts" setup>
-const { isLoading, selecteRow, tableData, hasSelection, sortChange } = definePropsRefs<{
-  isLoading?: boolean
-  selecteRow?: (row: any) => void
-  tableData: any[]
-  hasSelection?: boolean
-  sortChange?: (row: any) => void
-}>()
-
-const { selectedProfiles } = defineModels<{
-  selectedProfiles?: any[]
-}>()
-
-const hasId = computed(() => tableData.value?.some(item => item.id))
-
-const toggle = ref(false)
-function handleSelectionChange(val) {
-  if (toggle.value)
-    return
-  selectedProfiles.value = val
-}
-const multipleTableRef = ref<any>()
-whenever(multipleTableRef, () => {
-  if (selectedProfiles.value?.length > 0) {
-    toggle.value = true
-    tableData.value.forEach((row) => {
-      const isSelected = selectedProfiles.value?.some(item => item.id === row.id)
-      multipleTableRef.value?.toggleRowSelection(row, isSelected)
-    })
-    toggle.value = false
-  }
-})
-</script>
-
-<template>
-  <el-table
-    ref="multipleTableRef"
-    v-loading="isLoading"
-    :data="tableData"
-    stripe
-    border
-    row-key="id"
-    v-bind="$attrs"
-    class="my-16px w-full flex-1 [&_.el-table\_\_row:hover]:cursor-pointer"
-    @sort-change="sortChange"
-    @row-click="selecteRow"
-    @selection-change="handleSelectionChange"
-  >
-    <slot name="empty" />
-    <slot name="single" />
-    <el-table-column v-if="hasSelection" type="selection" width="55" />
-    <el-table-column
-      prop="id"
-      label="ID"
-      width="60"
-      fixed
-    >
-      <template #default="{ row }">
-        <SSCopyButton v-if="hasId" :value="row.id" @click.prevent.stop />
-      </template>
-    </el-table-column>
-    <ProfileTableColumns />
-    <template #empty>
-      <slot name="empty" />
-    </template>
-    <slot />
-  </el-table>
-</template>
+<script lang="ts" setup>
+const { isLoading, selecteRow, tableData, hasSelection, sortChange } = definePropsRefs<{
+  isLoading?: boolean
+  selecteRow?: (row: any) => void
+  tableData: any[]
+  hasSelection?: boolean
+  sortChange?: (row: any) => void
+}>()
+
+const { selectedProfiles } = defineModels<{
+  selectedProfiles?: any[]
+}>()
+
+const hasId = computed(() => tableData.value?.some(item => item.id))
+
+const toggle = ref(false)
+function handleSelectionChange(val) {
+  if (toggle.value)
+    return
+  selectedProfiles.value = val
+}
+const multipleTableRef = ref<any>()
+whenever(multipleTableRef, () => {
+  if (selectedProfiles.value?.length > 0) {
+    toggle.value = true
+    tableData.value.forEach((row) => {
+      const isSelected = selectedProfiles.value?.some(item => item.id === row.id)
+      multipleTableRef.value?.toggleRowSelection(row, isSelected)
+    })
+    toggle.value = false
+  }
+})
+</script>
+
+<template>
+  <el-table
+    ref="multipleTableRef"
+    v-loading="isLoading"
+    :data="tableData"
+    stripe
+    border
+    row-key="id"
+    v-bind="$attrs"
+    class="my-16px w-full flex-1 [&_.el-table\_\_row:hover]:cursor-pointer"
+    @sort-change="sortChange"
+    @row-click="selecteRow"
+    @selection-change="handleSelectionChange"
+  >
+    <slot name="empty" />
+    <slot name="single" />
+    <el-table-column v-if="hasSelection" type="selection" width="55" />
+    <el-table-column
+      prop="id"
+      label="ID"
+      width="60"
+      fixed
+    >
+      <template #default="{ row }">
+        <SSCopyButton v-if="hasId" :value="row.id" @click.prevent.stop />
+      </template>
+    </el-table-column>
+    <ProfileTableColumns />
+    <template #empty>
+      <slot name="empty" />
+    </template>
+    <slot />
+  </el-table>
+</template>

package/src/components/WatermarkDraggableItem.vue

@@ -1,88 +1,88 @@
-<script lang="ts" setup>
-import { isNumber } from '@antfu/utils'
-
-const { modelValue } = defineModels<{
-  modelValue: {
-    mediaScale: number
-    width: number
-    height: number
-    x: number
-    y: number
-    isActive: boolean
-    assetId: string
-  }
-}>()
-
-const screenRatio = ref(3)
-const watermarkXBoundary = ref(1920)
-const watermarkYBoundary = ref(1080)
-
-const w = computed({
-  get: () => {
-    return modelValue.value.width / screenRatio.value * modelValue.value.mediaScale
-  },
-  set: (value: number) => {
-    modelValue.value = {
-      ...modelValue.value,
-      width: value * screenRatio.value,
-      mediaScale: Number(((value * screenRatio.value) / modelValue.value.width).toFixed(1)),
-    }
-  },
-})
-
-const h = computed({
-  get: () => {
-    return modelValue.value.height / screenRatio.value * modelValue.value.mediaScale
-  },
-  set: (value: number) => {
-    modelValue.value = {
-      ...modelValue.value,
-      height: value * screenRatio.value,
-    }
-  },
-})
-
-const x = computed({
-  get: () => {
-    const origin = modelValue.value.x
-    if (origin >= 0)
-      return origin / screenRatio.value
-    return (watermarkXBoundary.value + origin - modelValue.value.width) / screenRatio.value
-  },
-  set: (left: number) => {
-    modelValue.value.x = (left * screenRatio.value) || 0
-  },
-})
-
-const y = computed({
-  get: () => {
-    const origin = modelValue.value.y
-    if (isNumber(origin)) {
-      if (origin >= 0)
-        return origin / screenRatio.value
-      return (watermarkYBoundary.value + origin - modelValue.value.height) / screenRatio.value
-    }
-    return origin
-  },
-  set: (top: number) => {
-    modelValue.value.y = (top * screenRatio.value) || 0
-  },
-})
-
-const { data } = useAssetDetail(() => modelValue.value.assetId)
-</script>
-
-<template>
-  <CommonVue3DraggableResizable
-    v-model:x="x" v-model:y="y" v-model:h="h" v-model:w="w"
-    v-model:active="modelValue.isActive" :handles="['tl', 'tr', 'br', 'bl']" :parent="true" :draggable="true"
-    :resizable="true" :lock-aspect-ratio="true"
-  >
-    <el-image v-if="data?.uri" class="h-full w-full" :src="data.uri" />
-  </CommonVue3DraggableResizable>
-<!--
-  :min-width="getVisualWatermarkSize(watermark.width || 10, 0.1)"
-        :min-height="getVisualWatermarkSize(watermark.height || 10, 0.1)"
-        :max-width="getVisualWatermarkSize(watermark.width, 10)"
-        :max-height="getVisualWatermarkSize(watermark.height, 10)" -->
-</template>
+<script lang="ts" setup>
+import { isNumber } from '@antfu/utils'
+
+const { modelValue } = defineModels<{
+  modelValue: {
+    mediaScale: number
+    width: number
+    height: number
+    x: number
+    y: number
+    isActive: boolean
+    assetId: string
+  }
+}>()
+
+const screenRatio = ref(3)
+const watermarkXBoundary = ref(1920)
+const watermarkYBoundary = ref(1080)
+
+const w = computed({
+  get: () => {
+    return modelValue.value.width / screenRatio.value * modelValue.value.mediaScale
+  },
+  set: (value: number) => {
+    modelValue.value = {
+      ...modelValue.value,
+      width: value * screenRatio.value,
+      mediaScale: Number(((value * screenRatio.value) / modelValue.value.width).toFixed(1)),
+    }
+  },
+})
+
+const h = computed({
+  get: () => {
+    return modelValue.value.height / screenRatio.value * modelValue.value.mediaScale
+  },
+  set: (value: number) => {
+    modelValue.value = {
+      ...modelValue.value,
+      height: value * screenRatio.value,
+    }
+  },
+})
+
+const x = computed({
+  get: () => {
+    const origin = modelValue.value.x
+    if (origin >= 0)
+      return origin / screenRatio.value
+    return (watermarkXBoundary.value + origin - modelValue.value.width) / screenRatio.value
+  },
+  set: (left: number) => {
+    modelValue.value.x = (left * screenRatio.value) || 0
+  },
+})
+
+const y = computed({
+  get: () => {
+    const origin = modelValue.value.y
+    if (isNumber(origin)) {
+      if (origin >= 0)
+        return origin / screenRatio.value
+      return (watermarkYBoundary.value + origin - modelValue.value.height) / screenRatio.value
+    }
+    return origin
+  },
+  set: (top: number) => {
+    modelValue.value.y = (top * screenRatio.value) || 0
+  },
+})
+
+const { data } = useAssetDetail(() => modelValue.value.assetId)
+</script>
+
+<template>
+  <CommonVue3DraggableResizable
+    v-model:x="x" v-model:y="y" v-model:h="h" v-model:w="w"
+    v-model:active="modelValue.isActive" :handles="['tl', 'tr', 'br', 'bl']" :parent="true" :draggable="true"
+    :resizable="true" :lock-aspect-ratio="true"
+  >
+    <el-image v-if="data?.uri" class="h-full w-full" :src="data.uri" />
+  </CommonVue3DraggableResizable>
+<!--
+  :min-width="getVisualWatermarkSize(watermark.width || 10, 0.1)"
+        :min-height="getVisualWatermarkSize(watermark.height || 10, 0.1)"
+        :max-width="getVisualWatermarkSize(watermark.width, 10)"
+        :max-height="getVisualWatermarkSize(watermark.height, 10)" -->
+</template>