@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Channel/TargetDestination.vue

@@ -1,375 +1,375 @@
-<script lang="ts" setup>
-import type { FormRules } from 'element-plus'
-import isIP from 'validator/lib/isIP'
-import isURL from 'validator/lib/isURL'
-import { set } from 'lodash-unified'
-import type { components } from '#nuxt-api-party/apiChannel'
-
-const { prop, enabled: enabledProp } = defineProps<{ prop: string; enabled: boolean }>()
-// const { enabled } = definePropsRefs<{
-//   enabled: boolean
-// }>()
-const enabled = computed(() => enabledProp)
-
-function getProp(path: string) {
-  return () => `${prop}.${path}`
-}
-
-const { formErrors } = useElFormContext()
-
-const { t } = useI18n()
-const [destinationValue] = useElField(prop, [], {
-  defaultValue: {
-    type: 'local',
-  },
-})
-const [bucketValue, bucketAttrs] = useElField<string>(getProp('s3.bucket'), [
-  {
-    required: true,
-    message: t('Vod.validate.require'),
-    trigger: ['blur', 'change'],
-  },
-  {
-    validator: (rule, value, callback) => {
-      if (value.length < 3 || value.length > 63)
-        callback(new Error(t('Vod.bucket_name.valid_length')))
-      if (!value.match(/^[a-z0-9]/) || !value.match(/[a-z0-9]$/))
-        callback(new Error(t('Vod.bucket_name.bucket_names_must_begin_and_end_with_a_letter_or_number')))
-      if (!value.match(/^[a-z0-9][a-z0-9.-]{1,61}[a-z0-9]$/))
-        callback(new Error(t('Vod.bucket_name.bucket_names_can_consist_only_of_lowercase_letters_numbers_dots_and_hyphens_-')))
-      if (!value.match(/^(?!.*\.(\.))/))
-        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_contain_two_adjacent_periods')))
-      if (isIP(value))
-        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_be_formatted_as_an_ip_address')))
-      if (!value.match(/^(?!xn--)(?!sthree-)(?!sthree-configurator-)/))
-        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_start_with_the_prefix_xn--_and_sthree-_and_the_prefix_sthree-configurator')))
-      if (!value.match(/^(?!.*--ol-s3$)/))
-        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_end_with_the_suffix_--ol-s3')))
-      else
-        callback()
-    },
-    trigger: ['blur', 'change'],
-  },
-], {
-  enabled,
-})
-
-const [endpointValue, endpointAttrs] = useElField<string>(getProp('s3.endpoint'), [
-  {
-    required: true,
-    message: t('Vod.validate.require'),
-    trigger: ['blur', 'change'],
-  },
-  {
-    validator: (rule, value, callback) => {
-      if (!isURL(value, { protocols: ['http', 'https'], require_protocol: true }))
-        callback(new Error(t('Vod.validate.format_uri')))
-      else
-        callback()
-    },
-    trigger: ['blur', 'change'],
-  },
-], {
-  enabled,
-})
-const [accessKeyValue, accessKeyAttrs] = useElField<string>(getProp('s3.accessKey'), [
-  {
-    required: true,
-    message: t('Vod.validate.require'),
-  },
-], {
-  enabled,
-})
-const [typeValue, typeAttrs] = useElField<string>(getProp('type'), [
-  {
-    required: true,
-    message: t('Vod.validate.require'),
-  },
-], {
-  enabled,
-})
-const [regionValue, regionAttrs] = useElField<string>(getProp('s3.region'), [], {
-  enabled,
-})
-const [secretKeyValue, secretKeyAttrs] = useElField<string>(getProp('s3.secretKey'), [
-  {
-    required: true,
-    message: t('Vod.validate.require'),
-    trigger: ['blur', 'change'],
-  },
-  {
-    min: 1,
-    max: 1000,
-    message: t('Vod.validate.length', { min: 1, max: 1000 }),
-    trigger: ['blur', 'change'],
-  },
-], {
-  enabled,
-})
-const [s3SegmentPrefixValue, s3SegmentPrefixAttrs] = useElField(getProp('s3.segmentPrefix'), [{
-  validator: (rule, value, callback) => {
-    if (value && !isURL(value, { protocols: ['http', 'https'], require_protocol: true }))
-      callback(new Error(t('Vod.validate.format_uri')))
-    else
-      callback()
-  },
-  trigger: ['blur', 'change'],
-}], {
-  enabled,
-})
-const [ftpHostValue, ftpHostAttrs] = useElField<string>(getProp('ftp.host'), [
-  {
-    required: true,
-    message: t('Vod.validate.require'),
-    trigger: ['blur', 'change'],
-  },
-  {
-    validator: (rule, value, callback) => {
-      if (!isIP(value))
-        callback(new Error(t('Vod.validate.format_ip')))
-      else
-        callback()
-    },
-    trigger: ['blur', 'change'],
-  },
-], {
-  enabled,
-})
-const [ftpPortValue, ftpPortAttrs] = useElField<number>(getProp('ftp.port'), [{
-  required: true,
-  message: t('Vod.validate.require'),
-  trigger: ['blur', 'change'],
-}], {
-  enabled,
-})
-
-const [ftpPasswordValue, ftpPasswordAttrs] = useElField<string>(getProp('ftp.password'), [{
-  required: true,
-  message: t('Vod.validate.require'),
-  trigger: ['blur', 'change'],
-}, {
-  min: 1,
-  max: 1000,
-  message: t('Vod.validate.length', { min: 1, max: 1000 }),
-  trigger: ['blur', 'change'],
-}], {
-  enabled,
-})
-const [ftpUsernameValue, ftpUsernameAttrs] = useElField<string>(getProp('ftp.username'), [{
-  required: true,
-  message: t('Vod.validate.require'),
-  trigger: ['blur', 'change'],
-}], {
-  enabled,
-})
-
-const [ftpSegmentPrefixValue, ftpSegmentPrefixAttrs] = useElField(getProp('ftp.segmentPrefix'), [{
-  validator: (rule, value, callback) => {
-    if (value && !isURL(value, { protocols: ['http', 'https'], require_protocol: true }))
-      callback(new Error(t('Vod.validate.format_uri')))
-    else
-      callback()
-  },
-  trigger: ['blur', 'change'],
-}], {
-  enabled,
-})
-
-function handleChangeType(type: 'ftp' | 's3' | 'local') {
-  if (type === 's3') {
-    destinationValue.value = {
-      type: 's3',
-      s3: {
-        accessKey: '',
-        bucket: '',
-        endpoint: '',
-        secretKey: '',
-        region: '',
-        segmentPrefix: '',
-      },
-    }
-  }
-  else if (type === 'ftp') {
-    destinationValue.value = {
-      type: 'ftp',
-      ftp: {
-        host: '',
-        port: 20,
-        password: '',
-        username: '',
-        segmentPrefix: '',
-      },
-    }
-  }
-  else {
-    destinationValue.value = {
-      type: 'local',
-    }
-  }
-  set(formErrors.value, prop, {})
-}
-const optionsType = [
-  {
-    value: 'local',
-    label: 'Server',
-  },
-  {
-    value: 'ftp',
-    label: 'FTP (S)',
-  },
-  {
-    value: 's3',
-    label: 'Generic S3',
-  },
-]
-</script>
-
-<template>
-  <div>
-    <el-form-item :label="t('Vod.destination')" v-bind="typeAttrs">
-      <el-radio-group v-model="typeValue" :disabled="!enabled" @change="handleChangeType">
-        <el-radio v-for="item in optionsType" :key="item.value" :label="item.value">
-          {{ item.label }}
-        </el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <Transition mode="out-in" name="slide-left">
-      <div v-if="typeValue === 's3' && destinationValue.s3" class="pl-3">
-        <div class="grid grid-cols-3 items-start gap-x-4 2xl:grid-cols-4">
-          <el-form-item label="Bucket Name" v-bind="bucketAttrs">
-            <el-input
-              v-model="bucketValue"
-              maxlength="63"
-              :placeholder="t('Vod.bucket_name.placeholder')"
-              show-word-limit
-              :disabled="!enabled"
-            />
-          </el-form-item>
-          <el-form-item label="Endpoint" v-bind="endpointAttrs">
-            <el-input
-              v-model="endpointValue"
-              maxlength="2048"
-              placeholder="http(s)://minio.dev:9000"
-              show-word-limit
-              :disabled="!enabled"
-            />
-          </el-form-item>
-          <el-form-item :label="t('Vod.access_key_id.label')" v-bind="accessKeyAttrs">
-            <el-input
-              v-model="accessKeyValue"
-              maxlength="1000"
-              :placeholder="t('Vod.access_key_id.placeholder')"
-              show-word-limit
-              :disabled="!enabled"
-            />
-          </el-form-item>
-          <el-form-item :label="t('Vod.secret_access_key.label')" v-bind="secretKeyAttrs">
-            <el-input
-              v-model="secretKeyValue"
-              maxlength="1000"
-              :placeholder="t('Vod.secret_access_key.placeholder')"
-              show-word-limit
-              type="password"
-              show-password
-              :disabled="!enabled"
-            />
-          </el-form-item>
-          <el-form-item label="Region" v-bind="regionAttrs">
-            <el-input
-              v-model="regionValue"
-              maxlength="50"
-              placeholder="Region"
-              show-word-limit
-              :disabled="!enabled"
-            />
-          </el-form-item>
-          <el-form-item label="Segment prefix" v-bind="s3SegmentPrefixAttrs">
-            <el-input
-              v-model="s3SegmentPrefixValue"
-              maxlength="2048"
-              placeholder="http(s)://example.com"
-              show-word-limit
-              :disabled="!enabled"
-            />
-          </el-form-item>
-        </div>
-      </div>
-      <div v-else-if="typeValue === 'ftp' && destinationValue.ftp" class="pl-3">
-        <div class="grid grid-cols-3 items-start gap-x-4 2xl:grid-cols-4">
-          <el-form-item label="Host" v-bind="ftpHostAttrs">
-            <el-input
-              v-model="ftpHostValue"
-              :placeholder="$t('Vod.host.description')"
-              show-word-limit
-              :disabled="!enabled"
-            />
-          </el-form-item>
-          <el-form-item label="Port" v-bind="ftpPortAttrs">
-            <el-input-number
-              v-model="ftpPortValue"
-              :min="1"
-              :max="65535"
-              :step="1"
-              :precision="0"
-              class="!w-full"
-              :disabled="!enabled"
-            />
-          </el-form-item>
-          <el-form-item :label="t('Vod.username.label')" v-bind="ftpUsernameAttrs">
-            <el-input
-              v-model="ftpUsernameValue"
-              maxlength="100"
-              :placeholder="$t('Vod.username.placeholder')"
-              show-word-limit
-              :disabled="!enabled"
-            />
-          </el-form-item><el-form-item :label="t('Vod.password.label')" v-bind="ftpPasswordAttrs">
-            <el-input
-              v-model="ftpPasswordValue"
-              maxlength="1000"
-              :placeholder="t('Vod.password.placeholder')"
-              show-word-limit
-              type="password"
-              show-password
-              :disabled="!enabled"
-            />
-          </el-form-item>
-          <el-form-item label="Segment prefix" v-bind="ftpSegmentPrefixAttrs">
-            <el-input
-              v-model="ftpSegmentPrefixValue"
-              maxlength="2048"
-              placeholder="http(s)://example.com"
-              show-word-limit
-              :disabled="!enabled"
-            />
-          </el-form-item>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: all 0.2s;
-}
-.slide-left-enter-from {
-  opacity: 0;
-  transform: translate(50px, 0);
-}
-.slide-left-leave-to {
-  opacity: 0;
-  transform: translate(-50px, 0);
-}
-.slide-right-enter-from {
-  opacity: 0;
-  transform: translate(-50px, 0);
-}
-.slide-right-leave-to {
-  opacity: 0;
-  transform: translate(50px, 0);
-}
-</style>
+<script lang="ts" setup>
+import type { FormRules } from 'element-plus'
+import isIP from 'validator/lib/isIP'
+import isURL from 'validator/lib/isURL'
+import { set } from 'lodash-unified'
+import type { components } from '#nuxt-api-party/apiChannel'
+
+const { prop, enabled: enabledProp } = defineProps<{ prop: string; enabled: boolean }>()
+// const { enabled } = definePropsRefs<{
+//   enabled: boolean
+// }>()
+const enabled = computed(() => enabledProp)
+
+function getProp(path: string) {
+  return () => `${prop}.${path}`
+}
+
+const { formErrors } = useElFormContext()
+
+const { t } = useI18n()
+const [destinationValue] = useElField(prop, [], {
+  defaultValue: {
+    type: 'local',
+  },
+})
+const [bucketValue, bucketAttrs] = useElField<string>(getProp('s3.bucket'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+  {
+    validator: (rule, value, callback) => {
+      if (value.length < 3 || value.length > 63)
+        callback(new Error(t('Vod.bucket_name.valid_length')))
+      if (!value.match(/^[a-z0-9]/) || !value.match(/[a-z0-9]$/))
+        callback(new Error(t('Vod.bucket_name.bucket_names_must_begin_and_end_with_a_letter_or_number')))
+      if (!value.match(/^[a-z0-9][a-z0-9.-]{1,61}[a-z0-9]$/))
+        callback(new Error(t('Vod.bucket_name.bucket_names_can_consist_only_of_lowercase_letters_numbers_dots_and_hyphens_-')))
+      if (!value.match(/^(?!.*\.(\.))/))
+        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_contain_two_adjacent_periods')))
+      if (isIP(value))
+        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_be_formatted_as_an_ip_address')))
+      if (!value.match(/^(?!xn--)(?!sthree-)(?!sthree-configurator-)/))
+        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_start_with_the_prefix_xn--_and_sthree-_and_the_prefix_sthree-configurator')))
+      if (!value.match(/^(?!.*--ol-s3$)/))
+        callback(new Error(t('Vod.bucket_name.bucket_names_must_not_end_with_the_suffix_--ol-s3')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled,
+})
+
+const [endpointValue, endpointAttrs] = useElField<string>(getProp('s3.endpoint'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+  {
+    validator: (rule, value, callback) => {
+      if (!isURL(value, { protocols: ['http', 'https'], require_protocol: true }))
+        callback(new Error(t('Vod.validate.format_uri')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled,
+})
+const [accessKeyValue, accessKeyAttrs] = useElField<string>(getProp('s3.accessKey'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+  },
+], {
+  enabled,
+})
+const [typeValue, typeAttrs] = useElField<string>(getProp('type'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+  },
+], {
+  enabled,
+})
+const [regionValue, regionAttrs] = useElField<string>(getProp('s3.region'), [], {
+  enabled,
+})
+const [secretKeyValue, secretKeyAttrs] = useElField<string>(getProp('s3.secretKey'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+  {
+    min: 1,
+    max: 1000,
+    message: t('Vod.validate.length', { min: 1, max: 1000 }),
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled,
+})
+const [s3SegmentPrefixValue, s3SegmentPrefixAttrs] = useElField(getProp('s3.segmentPrefix'), [{
+  validator: (rule, value, callback) => {
+    if (value && !isURL(value, { protocols: ['http', 'https'], require_protocol: true }))
+      callback(new Error(t('Vod.validate.format_uri')))
+    else
+      callback()
+  },
+  trigger: ['blur', 'change'],
+}], {
+  enabled,
+})
+const [ftpHostValue, ftpHostAttrs] = useElField<string>(getProp('ftp.host'), [
+  {
+    required: true,
+    message: t('Vod.validate.require'),
+    trigger: ['blur', 'change'],
+  },
+  {
+    validator: (rule, value, callback) => {
+      if (!isIP(value))
+        callback(new Error(t('Vod.validate.format_ip')))
+      else
+        callback()
+    },
+    trigger: ['blur', 'change'],
+  },
+], {
+  enabled,
+})
+const [ftpPortValue, ftpPortAttrs] = useElField<number>(getProp('ftp.port'), [{
+  required: true,
+  message: t('Vod.validate.require'),
+  trigger: ['blur', 'change'],
+}], {
+  enabled,
+})
+
+const [ftpPasswordValue, ftpPasswordAttrs] = useElField<string>(getProp('ftp.password'), [{
+  required: true,
+  message: t('Vod.validate.require'),
+  trigger: ['blur', 'change'],
+}, {
+  min: 1,
+  max: 1000,
+  message: t('Vod.validate.length', { min: 1, max: 1000 }),
+  trigger: ['blur', 'change'],
+}], {
+  enabled,
+})
+const [ftpUsernameValue, ftpUsernameAttrs] = useElField<string>(getProp('ftp.username'), [{
+  required: true,
+  message: t('Vod.validate.require'),
+  trigger: ['blur', 'change'],
+}], {
+  enabled,
+})
+
+const [ftpSegmentPrefixValue, ftpSegmentPrefixAttrs] = useElField(getProp('ftp.segmentPrefix'), [{
+  validator: (rule, value, callback) => {
+    if (value && !isURL(value, { protocols: ['http', 'https'], require_protocol: true }))
+      callback(new Error(t('Vod.validate.format_uri')))
+    else
+      callback()
+  },
+  trigger: ['blur', 'change'],
+}], {
+  enabled,
+})
+
+function handleChangeType(type: 'ftp' | 's3' | 'local') {
+  if (type === 's3') {
+    destinationValue.value = {
+      type: 's3',
+      s3: {
+        accessKey: '',
+        bucket: '',
+        endpoint: '',
+        secretKey: '',
+        region: '',
+        segmentPrefix: '',
+      },
+    }
+  }
+  else if (type === 'ftp') {
+    destinationValue.value = {
+      type: 'ftp',
+      ftp: {
+        host: '',
+        port: 20,
+        password: '',
+        username: '',
+        segmentPrefix: '',
+      },
+    }
+  }
+  else {
+    destinationValue.value = {
+      type: 'local',
+    }
+  }
+  set(formErrors.value, prop, {})
+}
+const optionsType = [
+  {
+    value: 'local',
+    label: 'Server',
+  },
+  {
+    value: 'ftp',
+    label: 'FTP (S)',
+  },
+  {
+    value: 's3',
+    label: 'Generic S3',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <el-form-item :label="t('Vod.destination')" v-bind="typeAttrs">
+      <el-radio-group v-model="typeValue" :disabled="!enabled" @change="handleChangeType">
+        <el-radio v-for="item in optionsType" :key="item.value" :label="item.value">
+          {{ item.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <Transition mode="out-in" name="slide-left">
+      <div v-if="typeValue === 's3' && destinationValue.s3" class="pl-3">
+        <div class="grid grid-cols-3 items-start gap-x-4 2xl:grid-cols-4">
+          <el-form-item label="Bucket Name" v-bind="bucketAttrs">
+            <el-input
+              v-model="bucketValue"
+              maxlength="63"
+              :placeholder="t('Vod.bucket_name.placeholder')"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item label="Endpoint" v-bind="endpointAttrs">
+            <el-input
+              v-model="endpointValue"
+              maxlength="2048"
+              placeholder="http(s)://minio.dev:9000"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item :label="t('Vod.access_key_id.label')" v-bind="accessKeyAttrs">
+            <el-input
+              v-model="accessKeyValue"
+              maxlength="1000"
+              :placeholder="t('Vod.access_key_id.placeholder')"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item :label="t('Vod.secret_access_key.label')" v-bind="secretKeyAttrs">
+            <el-input
+              v-model="secretKeyValue"
+              maxlength="1000"
+              :placeholder="t('Vod.secret_access_key.placeholder')"
+              show-word-limit
+              type="password"
+              show-password
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item label="Region" v-bind="regionAttrs">
+            <el-input
+              v-model="regionValue"
+              maxlength="50"
+              placeholder="Region"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item label="Segment prefix" v-bind="s3SegmentPrefixAttrs">
+            <el-input
+              v-model="s3SegmentPrefixValue"
+              maxlength="2048"
+              placeholder="http(s)://example.com"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+        </div>
+      </div>
+      <div v-else-if="typeValue === 'ftp' && destinationValue.ftp" class="pl-3">
+        <div class="grid grid-cols-3 items-start gap-x-4 2xl:grid-cols-4">
+          <el-form-item label="Host" v-bind="ftpHostAttrs">
+            <el-input
+              v-model="ftpHostValue"
+              :placeholder="$t('Vod.host.description')"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item label="Port" v-bind="ftpPortAttrs">
+            <el-input-number
+              v-model="ftpPortValue"
+              :min="1"
+              :max="65535"
+              :step="1"
+              :precision="0"
+              class="!w-full"
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item :label="t('Vod.username.label')" v-bind="ftpUsernameAttrs">
+            <el-input
+              v-model="ftpUsernameValue"
+              maxlength="100"
+              :placeholder="$t('Vod.username.placeholder')"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item><el-form-item :label="t('Vod.password.label')" v-bind="ftpPasswordAttrs">
+            <el-input
+              v-model="ftpPasswordValue"
+              maxlength="1000"
+              :placeholder="t('Vod.password.placeholder')"
+              show-word-limit
+              type="password"
+              show-password
+              :disabled="!enabled"
+            />
+          </el-form-item>
+          <el-form-item label="Segment prefix" v-bind="ftpSegmentPrefixAttrs">
+            <el-input
+              v-model="ftpSegmentPrefixValue"
+              maxlength="2048"
+              placeholder="http(s)://example.com"
+              show-word-limit
+              :disabled="!enabled"
+            />
+          </el-form-item>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.2s;
+}
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translate(50px, 0);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translate(-50px, 0);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(50px, 0);
+}
+</style>