@opentiny/vue-docs 3.27.1 → 3.28.0

package/demos/pc/app/icon/advance-icons.js

@@ -0,0 +1,412 @@
+export const advanceIcons = [
+  'IconAcceptance',
+  'IconActivation',
+  'IconAdministrator',
+  'IconAgendaView',
+  'IconAreaChart',
+  'IconArrowDown',
+  'IconArrowLeft',
+  'IconArrowRight',
+  'IconArrowUp',
+  'IconAscending',
+  'IconAssociation',
+  'IconAttachment',
+  'IconAudio',
+  'IconAudit',
+  'IconAutomaticAssessment',
+  'IconBarChart',
+  'IconBatchFill',
+  'IconBefilter',
+  'IconBoat',
+  'IconCalculator',
+  'IconCalendar',
+  'IconCardModeline',
+  'IconCheck',
+  'IconCheckedLinear',
+  'IconCheckOut',
+  'IconChevronDown',
+  'IconChevronLeft',
+  'IconChevronRight',
+  'IconChevronUp',
+  'IconClearFilter',
+  'IconClockWork',
+  'IconClose',
+  'IconCloseCircle',
+  'IconCloseSquare',
+  'IconCloudDownload',
+  'IconCoin',
+  'IconCommission',
+  'IconCompany',
+  'IconConmentRefresh',
+  'IconConnectSquare',
+  'IconCopy',
+  'IconCourse',
+  'IconCrop',
+  'IconCueL',
+  'IconCurrency',
+  'IconCustom',
+  'IconCustomerService',
+  'IconCustomsClearanceForm',
+  'IconCustomsDeclaration',
+  'IconDailyVisits',
+  'IconDefault',
+  'IconDefinedFiltration',
+  'IconDelegatedProcessing',
+  'IconDeleted',
+  'IconDeletePage',
+  'IconDeltaDownO',
+  'IconDeltaLeftO',
+  'IconDeltaRightO',
+  'IconDeltaUpO',
+  'IconDescending',
+  'IconDialog',
+  'IconDisallowance',
+  'IconDotChart',
+  'IconDotIpv4',
+  'IconDoubleLeft',
+  'IconDoubleRight',
+  'IconDownload',
+  'IconDownloadCloud',
+  'IconDrawFlowchart',
+  'IconEarthLined',
+  'IconEdit',
+  'IconEditorAlignCenter',
+  'IconEditorAlignLeft',
+  'IconEditorAlignRight',
+  'IconEditorBold',
+  'IconEditorCode',
+  'IconEditorDeleteline',
+  'IconEditorEraser',
+  'IconEditorItalic',
+  'IconEditorLeftBorder',
+  'IconEditorListDot',
+  'IconEditorListNum',
+  'IconEditorMenuLeft',
+  'IconEditorMenuRight',
+  'IconEditorQuote',
+  'IconEditorRedo',
+  'IconEditorRightBorder',
+  'IconEditorSub',
+  'IconEditorSubtitle',
+  'IconEditorSuper',
+  'IconEditorTable',
+  'IconEditorTextcolor',
+  'IconEditorTitle',
+  'IconEditorUnderline',
+  'IconEditorUndo',
+  'IconEditorVideo',
+  'IconEllipsis',
+  'IconEmailAdd',
+  'IconEmailCircle',
+  'IconEnd',
+  'IconEngineWorkflow',
+  'IconEspaceAuto',
+  'IconExcelType',
+  'IconException',
+  'IconExecutionPhase',
+  'IconExhibitionForum',
+  'IconExport',
+  'IconExpressSearch',
+  'IconEyeclose',
+  'IconEyeopen',
+  'IconFemale',
+  'IconFile',
+  'IconFileCloudupload',
+  'IconFileExcel',
+  'IconFilesCircle',
+  'IconFiletext',
+  'IconFileType',
+  'IconFileupload',
+  'IconFiltered',
+  'IconFlag',
+  'IconFolderClosed',
+  'IconFreezeLeft',
+  'IconFreezeRight',
+  'IconFrownO',
+  'IconFullscreen',
+  'IconFullscreenLeft',
+  'IconGenerating',
+  'IconGrade',
+  'IconGroup',
+  'IconGroupTransfer',
+  'IconHeartempty',
+  'IconHelpful',
+  'IconHotCn',
+  'IconHotEn',
+  'IconImageAdd',
+  'IconImport',
+  'IconInfoCircle',
+  'IconInformation',
+  'IconItemPlanningProperties',
+  'IconLeave',
+  'IconLeftFrozen',
+  'IconLetter',
+  'IconLineChart',
+  'IconLink',
+  'IconListMode',
+  'IconLoading',
+  'IconLocationNumber',
+  'IconLock',
+  'IconMailContent',
+  'IconMainFreightSettled',
+  'IconMainFreightToBeSettled',
+  'IconMaintainInspectionRecords',
+  'IconMale',
+  'IconMarkOn',
+  'IconMaterial',
+  'IconMeh',
+  'IconMessageCircle',
+  'IconMic',
+  'IconMilestone',
+  'IconMinscreen',
+  'IconMinscreenLeft',
+  'IconMinscreenRight',
+  'IconMinus',
+  'IconMinusCircle',
+  'IconMinusSquare',
+  'IconMobile',
+  'IconMobileCheckboxHalf',
+  'IconMobileRadio',
+  'IconMonthView',
+  'IconMsg',
+  'IconNewCn',
+  'IconNewEn',
+  'IconNodeOpen',
+  'IconNoPremission',
+  'IconOfd',
+  'IconOnLine',
+  'IconOther',
+  'IconOtherType',
+  'IconOuterLink',
+  'IconPagelink',
+  'IconPagerFirst',
+  'IconPagerLast',
+  'IconPanelMax',
+  'IconPanelNormal',
+  'IconPause',
+  'IconPauseCircle',
+  'IconPaymentSlips',
+  'IconPdfType',
+  'IconPendingReview',
+  'IconPerformance',
+  'IconPicture',
+  'IconPictureType',
+  'IconPieChart',
+  'IconPlus',
+  'IconPlusCircle',
+  'IconPptType',
+  'IconPreChecked',
+  'IconPrintPreview',
+  'IconProcessPlanRequirements',
+  'IconPublicHome',
+  'IconPublicNotice',
+  'IconPublish',
+  'IconPurchasePlannedOrder',
+  'IconPushpin',
+  'IconRadioselected',
+  'IconRenew',
+  'IconRepeat',
+  'IconReplace',
+  'IconReplies',
+  'IconReportSubmission',
+  'IconRequirementsPlanning',
+  'IconRightFrozen',
+  'IconSandwichCollapse',
+  'IconSandwichExpand',
+  'IconSave',
+  'IconScissor',
+  'IconSearch',
+  'IconSearchResource',
+  'IconSelect',
+  'IconSeniorVisits',
+  'IconService',
+  'IconSetting',
+  'IconSettingData',
+  'IconShare',
+  'IconShareArrow',
+  'IconShoppingCard',
+  'IconSimulcastChinese',
+  'IconSimulcastEnglish',
+  'IconSmile',
+  'IconSort',
+  'IconSortO',
+  'IconSplit',
+  'IconStarDisable',
+  'IconStartCircle',
+  'IconStatistics',
+  'IconSubscript',
+  'IconSubstituteMaterial',
+  'IconSuccessful',
+  'IconSummit',
+  'IconSurchargeSettled',
+  'IconSurchargeToBeSettled',
+  'IconTableMode',
+  'IconTaskCooperation',
+  'IconTelephone',
+  'IconTelephoneCircle',
+  'IconTextTab',
+  'IconTextType',
+  'IconThumbnail',
+  'IconToBeUploaded',
+  'IconTotal',
+  'IconTotalNumber',
+  'IconTotalVolume',
+  'IconTotalWeight',
+  'IconTransform',
+  'IconTurnOn',
+  'IconUndelete',
+  'IconUnderReview',
+  'IconUnfilter',
+  'IconUnfreeze',
+  'IconUnknow',
+  'IconUnlock',
+  'IconUnsent',
+  'IconUpAndDownArrowInner',
+  'IconUpAndDownArrowOuter',
+  'IconUpgrading',
+  'IconUpload',
+  'IconVersiontree',
+  'IconVideoType',
+  'IconViewFlowchart',
+  'IconWaitForDelivery',
+  'IconWaitForDeliveryO',
+  'IconWaitingForSubmission',
+  'IconWaitingToPick',
+  'IconWarningTriangle',
+  'IconWebPlus',
+  'IconWordType',
+  'IconWorkPackage',
+  'IconWriteProductionPlan',
+  'IconWriting',
+  'IconXml',
+  'IconYes',
+  'IconZipType',
+  'IconZoomIn',
+  'IconZoomOut'
+]
+
+export const batch3Icons = [
+  'IconAbnormalCheckIn',
+  'IconAnalyse',
+  'IconApproval',
+  'IconAskForLeave',
+  'IconBank',
+  'IconCancellationApplication',
+  'IconCheckProperties',
+  'IconComputingJob',
+  'IconConfirmPayrollProfile',
+  'IconCrossOrganizationWarehousingList',
+  'IconCustomSclearance',
+  'IconCustomsDeclarationList',
+  'IconDefinitionOfProcessRoles',
+  'IconDemandOrderList',
+  'IconDetailedList',
+  'IconDetailsPage',
+  'IconDigitalassistant',
+  'IconEmployeeInformation',
+  'IconEquipment',
+  'IconExchangerate',
+  'IconFastCode',
+  'IconGeneralAi',
+  'IconGeneralPageIndigo',
+  'IconIndicatorArtifactConfiguration',
+  'IconInspectionPlan',
+  'IconInterviewsList',
+  'IconInventoryLlist',
+  'IconInventoryOrganization',
+  'IconInventoryPlanList',
+  'IconInventoryPlanningRequirementsRequestChecklist',
+  'IconInventoryRequestChecklist',
+  'IconInventoryTransaction',
+  'IconListOfCandidates',
+  'IconListOfPermissionsToTransferGoods',
+  'IconListPage',
+  'IconMailboxConfiguration',
+  'IconMaintainPayrollProfile',
+  'IconMaterialAbcGroupingRules',
+  'IconMatter',
+  'IconMessageReleaseSuspension',
+  'IconMessageTemplate',
+  'IconMetaerpHelpDocumentManagement',
+  'IconMetaitHelpDocumentManagement',
+  'IconMiscellaneousList',
+  'IconMultidimensionalChangeList',
+  'IconMyApplication',
+  'IconMyAttendance',
+  'IconNumberMatchingRule',
+  'IconOnboarding',
+  'IconOrder',
+  'IconOutOfWarehouse',
+  'IconParameter',
+  'IconPay',
+  'IconPayrollApplication',
+  'IconPayrollApproval',
+  'IconPayrollElementCalculation',
+  'IconPayrollElementMaintenance',
+  'IconPeography',
+  'IconPersonalInformation',
+  'IconPickingRules',
+  'IconPirplane',
+  'IconPlanningDocument',
+  'IconPlanningEngine',
+  'IconPlanView',
+  'IconPnventoryDiscrepancyAdjustmentList',
+  'IconPositionManagement',
+  'IconPrivacyCreation',
+  'IconPrivacyStatement',
+  'IconProcessPersonnelAssignment',
+  'IconProcessRules',
+  'IconProduce',
+  'IconProductionorder',
+  'IconProjectActualCost',
+  'IconProjectBudgetCost',
+  'IconProjectContract',
+  'IconProjectExpenses',
+  'IconProjectForecast',
+  'IconProjectIncome',
+  'IconProjectInvoice',
+  'IconProjectProjectplan',
+  'IconProjectProperty',
+  'IconProjectStructureTree',
+  'IconProjectTemplate',
+  'IconPromotion',
+  'IconPurchaseContract',
+  'IconPutInWarehouse',
+  'IconQualifiedSupplierSpecification',
+  'IconQualityInspectionSheet',
+  'IconReceivable',
+  'IconRecruitmentServices',
+  'IconRegularization',
+  'IconReport',
+  'IconRepository',
+  'IconRequestPlan',
+  'IconSalaryForm',
+  'IconSalesOrder',
+  'IconServiceSubscription',
+  'IconServiceTenantServiceActivation',
+  'IconShippingDocuments',
+  'IconShippingOrder',
+  'IconSideHustleEnd',
+  'IconSideHustleStart',
+  'IconStaticIndex',
+  'IconSupplier',
+  'IconSupplierPerformance',
+  'IconSupplierPriceAgreement',
+  'IconSupplierQualification',
+  'IconSupplierQuotaAgreement',
+  'IconSupplierSourcing',
+  'IconTalentPoolList',
+  'IconTaxation',
+  'IconTeam',
+  'IconTender',
+  'IconTermination',
+  'IconTimezone',
+  'IconTrain',
+  'IconTransfer',
+  'IconTransferInventoryList',
+  'IconTransferringInventoryListsAcrossOrganizations',
+  'IconTransportation',
+  'IconTruck',
+  'IconWaybill',
+  'IconWorkOvertime'
+]

package/demos/pc/app/icon/advance-usage-composition-api.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="icon-demo">
+    <tiny-form label-width="100px" style="padding-bottom: 80px">
+      <tiny-form-item label="搜索图标">
+        <tiny-input class="search-input" v-model="searchName" clearable autofocus size="small"></tiny-input>
+      </tiny-form-item>
+      <tiny-form-item label="图标形状">
+        <tiny-radio-group v-model="shape">
+          <tiny-radio label="line">线性图标</tiny-radio>
+          <tiny-radio label="filled">面性图标</tiny-radio>
+        </tiny-radio-group>
+      </tiny-form-item>
+      <tiny-form-item label="主色">
+        <input type="color" v-model="firstColor" />
+      </tiny-form-item>
+      <tiny-form-item label="副色">
+        <input type="color" v-model="secondColor" />
+      </tiny-form-item>
+      <tiny-form-item label="是否托底">
+        <tiny-switch v-model="isUnderlay"></tiny-switch>
+      </tiny-form-item>
+      <tiny-form-item label="托底设置" v-if="isUnderlay">
+        <span>托底颜色：</span>
+        <input type="color" v-model="underlay.background" /> &nbsp;&nbsp;
+        <span>托底圆角：</span>
+        <tiny-input v-model="underlay.borderRadius" clearable autofocus size="small" style="width: 120px"></tiny-input
+        >&nbsp;&nbsp;
+        <span>中心缩放：</span>
+        <tiny-input v-model="underlay.scale" clearable autofocus size="small" style="width: 120px"></tiny-input>
+      </tiny-form-item>
+    </tiny-form>
+    <div class="svgs-wrapper">
+      <div
+        v-for="name in advanceIcons"
+        :key="name"
+        :class="{
+          'svg-visible': searchName === '' || name.toLowerCase().includes(searchName.toLowerCase()),
+          'svgs-item': true
+        }"
+        @click="click(name)"
+      >
+        <component
+          :is="Svgs[name] && Svgs[name]()"
+          class="svgs-icon"
+          :first-color="firstColor"
+          :second-color="secondColor"
+          :shape="shape"
+          :underlay="isUnderlay ? underlay : null"
+        ></component>
+        <span class="svgs-text" :title="name">{{ name }}</span>
+      </div>
+    </div>
+    <hr />
+    <div class="svgs-wrapper">
+      <div
+        v-for="name in batch3Icons"
+        :key="name"
+        :class="{
+          'svg-visible': searchName === '' || name.toLowerCase().includes(searchName.toLowerCase()),
+          'svgs-item': true
+        }"
+        @click="click(name)"
+      >
+        <component
+          :is="Svgs[name] && Svgs[name]()"
+          class="svgs-icon"
+          :first-color="firstColor"
+          :second-color="secondColor"
+          :shape="shape"
+          :underlay="isUnderlay ? underlay : null"
+        ></component>
+        <span class="svgs-text" :title="name">{{ name }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="js">
+import Svgs from '@opentiny/vue-icon'
+import { TinyForm, TinyFormItem, TinyModal, TinyInput, TinyRadioGroup, TinyRadio, TinySwitch } from '@opentiny/vue'
+import { advanceIcons, batch3Icons } from './advance-icons.js'
+import { getCurrentInstance, ref, watch } from 'vue'
+
+const searchName = ref('')
+const shape = ref('line')
+const firstColor = ref('#0067D1')
+const secondColor = ref('#36C18D')
+const isUnderlay = ref(false)
+const underlay = ref({
+  background: '#eef3fe',
+  borderRadius: '4px',
+  scale: 0.8
+})
+
+const instance = getCurrentInstance()
+watch(
+  underlay,
+  () => {
+    instance.update()
+  },
+  { deep: true }
+)
+
+function click(name) {
+  window.navigator.clipboard.writeText(name)
+  TinyModal.message({
+    message: `成功复制图标名称 ${name} `,
+    status: 'info'
+  })
+}
+</script>
+
+<style scoped>
+.svgs-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.search-input {
+  width: 250px;
+}
+
+.group-name {
+  display: none;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 26px;
+  padding: 0 0 8px 20px;
+  margin-bottom: 20px;
+  border-bottom: solid 1px #ccc;
+}
+
+.svgs-icon {
+  cursor: pointer;
+  transition: all 0.4s;
+  font-size: 40px;
+  fill: var(--tv-color-icon-control);
+  color: var(--tv-color-icon-control);
+}
+
+.svgs-icon:hover {
+  transform: scale(1.5, 1.5);
+}
+
+.svgs-item {
+  display: none;
+  width: 20%;
+  text-align: center;
+  padding: 24px;
+}
+
+.svgs-item:hover {
+  background-color: var(--tv-color-bg-hover);
+}
+
+.svgs-text {
+  margin-top: 12px;
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.svgs-box:has(> .svg-visible) .group-name {
+  display: block;
+}
+
+.svgs-item.svg-visible {
+  display: inline-block;
+}
+</style>