@oinone/kunlun-vue-ui-el 7.1.0 → 7.2.1

package/dist/oinone-kunlun-vue-ui-el.esm.js

@@ -1 +1 @@
-import{StringHelper as e,CastHelper as t,NumberHelper as a,autoRgbaStr as o,DateTimePickerMode as i,defaultFormat as s,DateUtil as r,DateFormatMap as l,TimeFormatMap as n}from"@oinone/kunlun-shared";export*from"@oinone/kunlun-shared";import{PropRecordHelper as c,OioColorPickerProps as m,OioDateTimePickerProps as d,OioDatePickerProps as p,OioTimePickerProps as u,OioYearPickerProps as h,ButtonType as v,useModal as O,OioModalProps as g}from"@oinone/kunlun-vue-ui-common";export*from"@oinone/kunlun-vue-ui-common";import{ElInput as f,ElColorPicker as k,ElTimePicker as b,ElDatePicker as F,ElButton as C,ElDialog as j,ElLoadingDirective as $}from"element-plus";import{isString as P}from"lodash-es";import{defineComponent as y,createVNode as D,ref as T,computed as _,withDirectives as V}from"vue";const w="oio";var E=y({name:"OioColorPicker",components:{ElColorPicker:k,ElInput:f},inheritAttrs:!1,props:Object.assign({},m),emits:["update:value","change"],setup(e,{emit:t}){const i=T(void 0),s=_(()=>{let t=e.lastedColorCount;return null==t&&(t=4),a.toNumber(t)});function r(){return e.disabledLastedColor?[]:(i.value||function(){const e=JSON.parse(localStorage.getItem("lastColors")||"[]");i.value=e||[]}(),i.value||[])}const l=_(()=>{let t=e.predefine||[];P(t)&&(t=JSON.parse(t));const a=t.map(e=>o(e)),i=r().map(e=>o(e));return[...new Set([...a,...i])]});return{predefineColors:l,handleChange:function(a){a&&!l.value.includes(a)&&function(t){if(e.disabledLastedColor)return;let a=i.value;a||(a=[],i.value=a),a.push(t),a.length>s.value&&a.shift(),localStorage.setItem("lastColors",JSON.stringify(a))}(a),t("change",a)}}},render(){const a=[`${w}-color-picker`];this.readonly&&a.push(`${w}-color-picker-readonly`);const o=[];let i=D(k,Object.assign(Object.assign({modelValue:this.value,defaultValue:this.defaultValue,colorFormat:this.colorFormat,disabled:this.disabled,showAlpha:this.showAlpha,predefine:this.predefineColors,popperClass:`${w}-color-picker-popper`},c.collectionBasicProps(this.$attrs,a)),{"onUpdate:modelValue":e=>this.$emit("update:value",e),onChange:this.handleChange}));if(this.hasInput){i=D("div",{class:[`${w}-color-picker-inner`,this.readonly?`${w}-color-picker-inner-readonly`:""]},[i]);const e={};e[this.inputPlacement]=()=>[i],o.push(D(f,{modelValue:this.value,placeholder:this.inputPlaceholder,readonly:this.inputReadonly||this.readonly,disabled:this.disabled},e))}else o.push(i);return D("div",{class:e.append(a,t.cast(this.$attrs.class))},o)}});E.__file="src/component/oio-color-picker/oio-color-picker.vue";var N=y({name:"OioDateTimePicker",components:{ElDatePicker:F,ElTimePicker:b},inheritAttrs:!1,props:Object.assign({},d),emits:["update:value"],setup(e){const t=_(()=>r.fetchDatetimeFormat({hasDateFormat:e.hasDateFormat,hasTimeFormat:e.hasTimeFormat},e.format,e.dateFormat,e.timeFormat,e.convertFormat,e.convertDateFormat,e.convertTimeFormat)||s),a=_(()=>e.valueFormat||s),o=_(()=>r.toDate(e.defaultValue,a.value));return{format:t,valueFormat:a,defaultValue:o}},render(){let a=F;this.mode===i.time&&(a=b);const o=[`${w}-date-time-picker`];return this.readonly&&o.push(`${w}-date-time-picker-readonly`),D(a,Object.assign(Object.assign({defaultValue:this.defaultValue,placeholder:this.placeholder,readonly:this.readonly,disabled:this.disabled,format:this.format,valueFormat:this.valueFormat},this.$attrs),{modelValue:this.value,"onUpdate:model-value":e=>{this.$emit("update:value",e)},type:this.mode,clearable:this.allowClear,class:e.append(o,t.cast(this.$attrs.class)),popperClass:e.append([`${w}-date-time-picker-popper`],this.dropdownClassName)}))}});N.__file="src/component/oio-date-time-picker/oio-date-time-picker.vue";var S=y({name:"OioDatePicker",components:{OioDateTimePicker:N},props:Object.assign({},p),emits:["update:value"],setup:()=>({convertFormat:e=>l.get(e)}),render(){return D(N,Object.assign(Object.assign(Object.assign({},c.convert(p,t.cast(this))),this.$attrs),{"onUpdate:value":e=>{this.$emit("update:value",e)},mode:i.date,hasDateFormat:!0,hasTimeFormat:!1,convertFormat:this.convertFormat}))}});S.__file="src/component/oio-date-time-picker/oio-date-picker.vue";var x=y({name:"OioTimePicker",components:{OioDateTimePicker:N},props:Object.assign({},u),emits:["update:value"],setup:()=>({convertFormat:e=>n.get(e)}),render(){return D(N,Object.assign(Object.assign(Object.assign({},c.convert(u,t.cast(this))),this.$attrs),{"onUpdate:value":e=>{this.$emit("update:value",e)},mode:i.time,hasDateFormat:!1,hasTimeFormat:!0,convertFormat:this.convertFormat}))}});x.__file="src/component/oio-date-time-picker/oio-time-picker.vue";var A=y({name:"OioYearPicker",components:{OioDateTimePicker:N},props:Object.assign({},h),emits:["update:value"],render(){return D(N,Object.assign(Object.assign(Object.assign({},c.convert(h,t.cast(this))),this.$attrs),{"onUpdate:value":e=>{this.$emit("update:value",e)},mode:i.year,hasDateFormat:!1,hasTimeFormat:!1}))}});A.__file="src/component/oio-date-time-picker/oio-year-picker.vue";var U=y({name:"OioModal",components:{ElDialog:j,ElButton:C},inheritAttrs:!1,props:Object.assign({},g),emits:["update:visible"],setup:(e,t)=>Object.assign({},O(e,t)),render(){const a=c.collectionSlots(this.$slots,[{origin:"default",isNotNull:!0},["header","title"],{origin:"footer",default:()=>[D(C,{onClick:this.cancel},this.cancelText),D(C,{type:v.primary,onClick:this.enter},this.enterText)]},"icon"]);return V(D(j,Object.assign(Object.assign({title:this.title,width:this.width,draggable:this.draggable,showClose:!0,closeOnClickModal:!0,closeOnPressEscape:!0,destroyOnClose:this.destroyOnClose},this.$attrs),{class:e.append([`${w}-modal`],t.cast(this.$attrs.class)),modelValue:this.visible,beforeClose:this.cancel}),Object.assign(Object.assign({},a),{default:()=>a.default({data:this.data})})),[[$,this.loading]])}});U.__file="src/component/oio-modal/oio-modal.vue";export{E as OioColorPicker,S as OioDatePicker,N as OioDateTimePicker,U as OioModal,x as OioTimePicker,A as OioYearPicker};
+import{StringHelper as e,CastHelper as t,NumberHelper as a,autoRgbaStr as o,DateTimePickerMode as i,defaultFormat as s,DateUtil as r,DateFormatMap as l,TimeFormatMap as n}from"@oinone/kunlun-shared";export*from"@oinone/kunlun-shared";import{PropRecordHelper as c,OioColorPickerProps as m,OioDateTimePickerProps as d,OioDatePickerProps as p,OioTimePickerProps as u,OioYearPickerProps as h,ButtonType as v,useModal as O,OioModalProps as g}from"@oinone/kunlun-vue-ui-common";export*from"@oinone/kunlun-vue-ui-common";import{ElInput as f,ElColorPicker as k,ElTimePicker as b,ElDatePicker as F,ElButton as C,ElDialog as $,ElLoadingDirective as j}from"element-plus";import{isString as P}from"lodash-es";import{defineComponent as y,createVNode as D,ref as T,computed as _,withDirectives as V}from"vue";const w="oio";var E=y({name:"OioColorPicker",components:{ElColorPicker:k,ElInput:f},inheritAttrs:!1,props:Object.assign({},m),emits:["update:value","change"],setup(e,{emit:t}){const i=T(void 0),s=_(()=>{let t=e.lastedColorCount;return null==t&&(t=4),a.toNumber(t)});function r(){return e.disabledLastedColor?[]:(i.value||function(){const e=JSON.parse(localStorage.getItem("lastColors")||"[]");i.value=e||[]}(),i.value||[])}const l=_(()=>{let t=e.predefine||[];P(t)&&(t=JSON.parse(t));const a=t.map(e=>o(e)),i=r().map(e=>o(e));return[...new Set([...a,...i])]});return{predefineColors:l,handleChange:function(a){a&&!l.value.includes(a)&&function(t){if(e.disabledLastedColor)return;let a=i.value;a||(a=[],i.value=a),a.push(t),a.length>s.value&&a.shift(),localStorage.setItem("lastColors",JSON.stringify(a))}(a),t("change",a)}}},render(){const a=[`${w}-color-picker`];this.readonly&&a.push(`${w}-color-picker-readonly`);const o=[];let i=D(k,Object.assign(Object.assign({modelValue:this.value,defaultValue:this.defaultValue,colorFormat:this.colorFormat,disabled:this.disabled,showAlpha:this.showAlpha,predefine:this.predefineColors,popperClass:`${w}-color-picker-popper`},c.collectionBasicProps(this.$attrs,a)),{"onUpdate:modelValue":e=>this.$emit("update:value",e),onChange:this.handleChange}));if(this.hasInput){i=D("div",{class:[`${w}-color-picker-inner`,this.readonly?`${w}-color-picker-inner-readonly`:""]},[i]);const e={};e[this.inputPlacement]=()=>[i],o.push(D(f,{modelValue:this.value,placeholder:this.$translate(this.inputPlaceholder),readonly:this.inputReadonly||this.readonly,disabled:this.disabled},e))}else o.push(i);return D("div",{class:e.append(a,t.cast(this.$attrs.class))},o)}});E.__file="src/component/oio-color-picker/oio-color-picker.vue";var N=y({name:"OioDateTimePicker",components:{ElDatePicker:F,ElTimePicker:b},inheritAttrs:!1,props:Object.assign({},d),emits:["update:value"],setup(e){const t=_(()=>r.fetchDatetimeFormat({hasDateFormat:e.hasDateFormat,hasTimeFormat:e.hasTimeFormat},e.format,e.dateFormat,e.timeFormat,e.convertFormat,e.convertDateFormat,e.convertTimeFormat)||s),a=_(()=>e.valueFormat||s),o=_(()=>r.toDate(e.defaultValue,a.value));return{format:t,valueFormat:a,defaultValue:o}},render(){let a=F;this.mode===i.time&&(a=b);const o=[`${w}-date-time-picker`];return this.readonly&&o.push(`${w}-date-time-picker-readonly`),D(a,Object.assign(Object.assign({defaultValue:this.defaultValue,placeholder:this.placeholder,readonly:this.readonly,disabled:this.disabled,format:this.format,valueFormat:this.valueFormat},this.$attrs),{modelValue:this.value,"onUpdate:model-value":e=>{this.$emit("update:value",e)},type:this.mode,clearable:this.allowClear,class:e.append(o,t.cast(this.$attrs.class)),popperClass:e.append([`${w}-date-time-picker-popper`],this.dropdownClassName)}))}});N.__file="src/component/oio-date-time-picker/oio-date-time-picker.vue";var S=y({name:"OioDatePicker",components:{OioDateTimePicker:N},props:Object.assign({},p),emits:["update:value"],setup:()=>({convertFormat:e=>l.get(e)}),render(){return D(N,Object.assign(Object.assign(Object.assign({},c.convert(p,t.cast(this))),this.$attrs),{"onUpdate:value":e=>{this.$emit("update:value",e)},mode:i.date,hasDateFormat:!0,hasTimeFormat:!1,convertFormat:this.convertFormat}))}});S.__file="src/component/oio-date-time-picker/oio-date-picker.vue";var x=y({name:"OioTimePicker",components:{OioDateTimePicker:N},props:Object.assign({},u),emits:["update:value"],setup:()=>({convertFormat:e=>n.get(e)}),render(){return D(N,Object.assign(Object.assign(Object.assign({},c.convert(u,t.cast(this))),this.$attrs),{"onUpdate:value":e=>{this.$emit("update:value",e)},mode:i.time,hasDateFormat:!1,hasTimeFormat:!0,convertFormat:this.convertFormat}))}});x.__file="src/component/oio-date-time-picker/oio-time-picker.vue";var A=y({name:"OioYearPicker",components:{OioDateTimePicker:N},props:Object.assign({},h),emits:["update:value"],render(){return D(N,Object.assign(Object.assign(Object.assign({},c.convert(h,t.cast(this))),this.$attrs),{"onUpdate:value":e=>{this.$emit("update:value",e)},mode:i.year,hasDateFormat:!1,hasTimeFormat:!1}))}});A.__file="src/component/oio-date-time-picker/oio-year-picker.vue";var U=y({name:"OioModal",components:{ElDialog:$,ElButton:C},inheritAttrs:!1,props:Object.assign({},g),emits:["update:visible"],setup:(e,t)=>Object.assign({},O(e,t)),render(){const a=c.collectionSlots(this.$slots,[{origin:"default",isNotNull:!0},["header","title"],{origin:"footer",default:()=>[D(C,{onClick:this.cancel},this.cancelText),D(C,{type:v.primary,onClick:this.enter},this.enterText)]},"icon"]);return V(D($,Object.assign(Object.assign({title:this.title,width:this.width,draggable:this.draggable,showClose:!0,closeOnClickModal:!0,closeOnPressEscape:!0,destroyOnClose:this.destroyOnClose},this.$attrs),{class:e.append([`${w}-modal`],t.cast(this.$attrs.class)),modelValue:this.visible,beforeClose:this.cancel}),Object.assign(Object.assign({},a),{default:()=>a.default({data:this.data})})),[[j,this.loading]])}});U.__file="src/component/oio-modal/oio-modal.vue";export{E as OioColorPicker,S as OioDatePicker,N as OioDateTimePicker,U as OioModal,x as OioTimePicker,A as OioYearPicker};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oinone/kunlun-vue-ui-el",
-  "version": "7.1.0",
+  "version": "7.2.1",
   "type": "module",
   "main": "dist/oinone-kunlun-vue-ui-el.esm.js",
   "scripts": {
@@ -17,11 +17,11 @@
     "doc": "typedoc --out docs src/index.ts"
   },
   "dependencies": {
-    "@oinone/kunlun-vue-ui-common": "7.1.0"
+    "@oinone/kunlun-vue-ui-common": "7.2.1"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "2.0.9",
-    "@oinone/kunlun-shared": "~7.1.0",
+    "@oinone/kunlun-shared": "~7.2.0",
     "@types/lodash": "4.17.21",
     "@types/lodash-es": "4.17.6",
     "element-plus": "2.13.0",

package/src/component/oio-color-picker/oio-color-picker.vue

@@ -117,7 +117,7 @@ export default defineComponent({
           ElInput,
           {
             modelValue: this.value,
-            placeholder: this.inputPlaceholder,
+            placeholder: this.$translate(this.inputPlaceholder),
             readonly: this.inputReadonly || this.readonly,
             disabled: this.disabled
           },

package/src/shim-translate.d.ts

@@ -2,6 +2,9 @@ export {};
 
 declare module 'vue' {
   interface ComponentCustomProperties {
-    $translate<T extends string | null | undefined = string | null | undefined>(text: T): T;
+    $translate<T extends string | null | undefined = string | null | undefined>(
+      text: T,
+      context?: Record<string, unknown>
+    ): T;
   }
 }