@oinone/kunlun-vue-ui-el 6.2.0

package/README.md

@@ -0,0 +1 @@
+内置element-plus-ui组件库

package/dist/oinone-kunlun-vue-ui-el.css

@@ -0,0 +1 @@
+.oio-color-picker .el-input__wrapper{background:var(--oio-input-background);padding:0 11px}.oio-color-picker .el-input__wrapper:hover{border-color:var(--oio-primary-color-hover);box-shadow:0 0 0 1px var(--oio-primary-color-hover) inset}.oio-color-picker .el-input.is-disabled .el-input__wrapper{background:var(--oio-readonly-bg);border-color:var(--oio-border-color);box-shadow:0 0 0 1px var(--oio-readonly-bg) inset}.oio-color-picker .el-color-picker{outline:none}.oio-color-picker .el-color-picker .el-color-picker__empty{color:var(--oio-addon-color-pick-icon-color)}.oio-color-picker .el-color-picker__color.is-alpha{background-image:none;border:none}.oio-color-picker .el-input{--el-input-text-color: var(--oio-input-text-color);--el-input-border: var(--oio-input-border-width) var(--oio-input-border-style) var(--oio-input-border-color);--el-input-border-color: var(--oio-input-border-color);--el-input-border-radius: var(--oio-input-border-radius);--el-input-hover-border: var(--oio-input-border-style-hover);--el-input-focus-border: var(--oio-input-border-style-focus);font-size:var(--oio-font-size);line-height:var(--oio-input-line-height);width:100%}.oio-color-picker .el-input .el-input__inner{border-color:var(--oio-border-color);height:var(--oio-height);line-height:var(--oio-input-line-height)}.oio-color-picker .el-input .el-input-group__prepend,.oio-color-picker .el-input .el-input-group__append{border-color:var(--oio-addon-color-pick-border-color);padding:0;background-color:transparent}.oio-color-picker .el-input .el-input-group__prepend .oio-color-picker-inner{border-top-left-radius:var(--oio-border-radius);border-bottom-left-radius:var(--oio-border-radius)}.oio-color-picker .el-input .el-input-group__append .oio-color-picker-inner{border-top-right-radius:var(--oio-border-radius);border-bottom-right-radius:var(--oio-border-radius)}.oio-color-picker .oio-color-picker-inner{height:calc(var(--oio-height) - 2px);width:calc(var(--oio-height) - 2px);display:flex;justify-content:center;align-items:center}.oio-color-picker .oio-color-picker-inner .el-color-picker .el-color-picker__trigger{border:none;border-radius:0}.oio-color-picker .oio-color-picker-inner-readonly{pointer-events:none;background-color:var(--oio-addon-color-pick-readonly-background)}.oio-color-picker .oio-color-picker-inner>.is-disabled .el-color-picker__mask{display:none}.oio-color-picker .oio-color-picker-inner>.is-disabled .el-color-picker__trigger{background-color:var(--oio-addon-color-pick-readonly-background)}.oio-color-picker.oio-color-picker-readonly .el-input__inner[readonly]{background-color:transparent}.oio-color-picker.oio-color-picker-readonly .el-color-picker__trigger{pointer-events:none}.oio-color-picker.oio-color-picker-readonly .el-color-picker__trigger .el-color-picker__icon{display:none}.oio-color-picker>.el-input.is-disabled{background-color:var(--oio-disabled-bg);border:1px solid var(--oio-border-color);box-sizing:border-box}.oio-color-picker>.el-input.is-disabled .el-input__inner{border-color:var(--oio-border-color);height:calc(var(--oio-height) - 2px);line-height:calc(var(--oio-input-line-height) - 2px);background-color:var(--oio-disabled-bg)}.oio-color-picker>.el-input.is-disabled .el-color-picker__trigger{height:calc(var(--oio-height) - 2px);line-height:calc(var(--oio-input-line-height) - 2px);border-left:1px solid var(--oio-border-color);border-right:1px solid var(--oio-border-color)}.oio-date-time-picker{width:100%}.oio-date-time-picker.el-date-editor.el-input,.oio-date-time-picker.el-date-editor.el-input__inner{--el-input-text-color: var(--oio-input-text-color);--el-input-border: var(--oio-input-border-width) var(--oio-input-border-style) var(--oio-input-border-color);--el-input-border-color: var(--oio-input-border-color);--el-input-border-radius: var(--oio-input-border-radius);--el-input-hover-border: var(--oio-input-border-style-hover);--el-input-focus-border: var(--oio-input-border-style-focus);font-size:var(--oio-font-size);line-height:var(--oio-input-line-height);width:100%}.oio-date-time-picker.el-date-editor.el-input .el-input__inner,.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner{background-color:var(--oio-input-background);border:var(--oio-input-border-width) var(--oio-input-border-style) var(--oio-input-border-color);border-radius:var(--oio-input-border-radius);box-shadow:var(--oio-input-shadow);color:var(--oio-input-text-color);outline:var(--oio-input-outline);height:var(--oio-height);line-height:var(--oio-input-line-height);padding-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oio-date-time-picker.el-date-editor.el-input .el-input__inner:hover,.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner:hover{background-color:var(--oio-input-background-hover);border:var(--oio-input-border-width-hover) var(--oio-input-border-style-hover) var(--oio-input-border-color-hover);border-radius:var(--oio-input-border-radius-hover);box-shadow:var(--oio-input-shadow-hover);color:var(--oio-input-text-color-hover);outline:var(--oio-input-outline-hover)}.oio-date-time-picker.el-date-editor.el-input .el-input__inner:focus,.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner:focus{background-color:var(--oio-input-background-focus);border:var(--oio-input-border-width-focus) var(--oio-input-border-style-focus) var(--oio-input-border-color-focus);border-radius:var(--oio-input-border-radius-focus);box-shadow:var(--oio-input-shadow-focus);color:var(--oio-input-text-color-focus);outline:var(--oio-input-outline-focus)}.oio-date-time-picker.el-date-editor.el-input .el-input__inner[disabled],.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner[disabled]{background-color:var(--oio-disabled-bg);color:var(--oio-disabled-color)}.oio-date-time-picker.el-date-editor.el-input .el-input__inner[disabled]:hover,.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner[disabled]:hover{background-color:var(--oio-disabled-bg);color:var(--oio-disabled-color);border-color:var(--oio-input-border-color)}.oio-date-time-picker.el-date-editor.el-input .el-input__inner[disabled]:focus,.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner[disabled]:focus{background-color:var(--oio-disabled-bg);color:var(--oio-disabled-color);border-color:var(--oio-input-border-color)}.oio-date-time-picker.oio-date-time-picker-readonly .el-input__inner{background-color:var(--oio-disabled-bg)}.oio-date-time-picker.oio-date-time-picker-readonly .el-input__inner:hover{background-color:var(--oio-disabled-bg)}.oio-date-time-picker.oio-date-time-picker-readonly .el-input__inner:focus{background-color:var(--oio-disabled-bg)}

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

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

package/dist/oinone-kunlun-vue-ui-el.scss

@@ -0,0 +1 @@
+.oio-color-picker .el-input__wrapper{background:var(--oio-input-background);padding:0 11px}.oio-color-picker .el-input__wrapper:hover{border-color:var(--oio-primary-color-hover);box-shadow:0 0 0 1px var(--oio-primary-color-hover) inset}.oio-color-picker .el-input.is-disabled .el-input__wrapper{background:var(--oio-readonly-bg);border-color:var(--oio-border-color);box-shadow:0 0 0 1px var(--oio-readonly-bg) inset}.oio-color-picker .el-color-picker{outline:none}.oio-color-picker .el-color-picker .el-color-picker__empty{color:var(--oio-addon-color-pick-icon-color)}.oio-color-picker .el-color-picker__color.is-alpha{background-image:none;border:none}.oio-color-picker .el-input{--el-input-text-color: var(--oio-input-text-color);--el-input-border: var(--oio-input-border-width) var(--oio-input-border-style) var(--oio-input-border-color);--el-input-border-color: var(--oio-input-border-color);--el-input-border-radius: var(--oio-input-border-radius);--el-input-hover-border: var(--oio-input-border-style-hover);--el-input-focus-border: var(--oio-input-border-style-focus);font-size:var(--oio-font-size);line-height:var(--oio-input-line-height);width:100%}.oio-color-picker .el-input .el-input__inner{border-color:var(--oio-border-color);height:var(--oio-height);line-height:var(--oio-input-line-height)}.oio-color-picker .el-input .el-input-group__prepend,.oio-color-picker .el-input .el-input-group__append{border-color:var(--oio-addon-color-pick-border-color);padding:0;background-color:transparent}.oio-color-picker .el-input .el-input-group__prepend .oio-color-picker-inner{border-top-left-radius:var(--oio-border-radius);border-bottom-left-radius:var(--oio-border-radius)}.oio-color-picker .el-input .el-input-group__append .oio-color-picker-inner{border-top-right-radius:var(--oio-border-radius);border-bottom-right-radius:var(--oio-border-radius)}.oio-color-picker .oio-color-picker-inner{height:calc(var(--oio-height) - 2px);width:calc(var(--oio-height) - 2px);display:flex;justify-content:center;align-items:center}.oio-color-picker .oio-color-picker-inner .el-color-picker .el-color-picker__trigger{border:none;border-radius:0}.oio-color-picker .oio-color-picker-inner-readonly{pointer-events:none;background-color:var(--oio-addon-color-pick-readonly-background)}.oio-color-picker .oio-color-picker-inner>.is-disabled .el-color-picker__mask{display:none}.oio-color-picker .oio-color-picker-inner>.is-disabled .el-color-picker__trigger{background-color:var(--oio-addon-color-pick-readonly-background)}.oio-color-picker.oio-color-picker-readonly .el-input__inner[readonly]{background-color:transparent}.oio-color-picker.oio-color-picker-readonly .el-color-picker__trigger{pointer-events:none}.oio-color-picker.oio-color-picker-readonly .el-color-picker__trigger .el-color-picker__icon{display:none}.oio-color-picker>.el-input.is-disabled{background-color:var(--oio-disabled-bg);border:1px solid var(--oio-border-color);box-sizing:border-box}.oio-color-picker>.el-input.is-disabled .el-input__inner{border-color:var(--oio-border-color);height:calc(var(--oio-height) - 2px);line-height:calc(var(--oio-input-line-height) - 2px);background-color:var(--oio-disabled-bg)}.oio-color-picker>.el-input.is-disabled .el-color-picker__trigger{height:calc(var(--oio-height) - 2px);line-height:calc(var(--oio-input-line-height) - 2px);border-left:1px solid var(--oio-border-color);border-right:1px solid var(--oio-border-color)}.oio-date-time-picker{width:100%}.oio-date-time-picker.el-date-editor.el-input,.oio-date-time-picker.el-date-editor.el-input__inner{--el-input-text-color: var(--oio-input-text-color);--el-input-border: var(--oio-input-border-width) var(--oio-input-border-style) var(--oio-input-border-color);--el-input-border-color: var(--oio-input-border-color);--el-input-border-radius: var(--oio-input-border-radius);--el-input-hover-border: var(--oio-input-border-style-hover);--el-input-focus-border: var(--oio-input-border-style-focus);font-size:var(--oio-font-size);line-height:var(--oio-input-line-height);width:100%}.oio-date-time-picker.el-date-editor.el-input .el-input__inner,.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner{background-color:var(--oio-input-background);border:var(--oio-input-border-width) var(--oio-input-border-style) var(--oio-input-border-color);border-radius:var(--oio-input-border-radius);box-shadow:var(--oio-input-shadow);color:var(--oio-input-text-color);outline:var(--oio-input-outline);height:var(--oio-height);line-height:var(--oio-input-line-height);padding-right:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oio-date-time-picker.el-date-editor.el-input .el-input__inner:hover,.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner:hover{background-color:var(--oio-input-background-hover);border:var(--oio-input-border-width-hover) var(--oio-input-border-style-hover) var(--oio-input-border-color-hover);border-radius:var(--oio-input-border-radius-hover);box-shadow:var(--oio-input-shadow-hover);color:var(--oio-input-text-color-hover);outline:var(--oio-input-outline-hover)}.oio-date-time-picker.el-date-editor.el-input .el-input__inner:focus,.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner:focus{background-color:var(--oio-input-background-focus);border:var(--oio-input-border-width-focus) var(--oio-input-border-style-focus) var(--oio-input-border-color-focus);border-radius:var(--oio-input-border-radius-focus);box-shadow:var(--oio-input-shadow-focus);color:var(--oio-input-text-color-focus);outline:var(--oio-input-outline-focus)}.oio-date-time-picker.el-date-editor.el-input .el-input__inner[disabled],.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner[disabled]{background-color:var(--oio-disabled-bg);color:var(--oio-disabled-color)}.oio-date-time-picker.el-date-editor.el-input .el-input__inner[disabled]:hover,.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner[disabled]:hover{background-color:var(--oio-disabled-bg);color:var(--oio-disabled-color);border-color:var(--oio-input-border-color)}.oio-date-time-picker.el-date-editor.el-input .el-input__inner[disabled]:focus,.oio-date-time-picker.el-date-editor.el-input__inner .el-input__inner[disabled]:focus{background-color:var(--oio-disabled-bg);color:var(--oio-disabled-color);border-color:var(--oio-input-border-color)}.oio-date-time-picker.oio-date-time-picker-readonly .el-input__inner{background-color:var(--oio-disabled-bg)}.oio-date-time-picker.oio-date-time-picker-readonly .el-input__inner:hover{background-color:var(--oio-disabled-bg)}.oio-date-time-picker.oio-date-time-picker-readonly .el-input__inner:focus{background-color:var(--oio-disabled-bg)}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@oinone/kunlun-shared';
+export * from '@oinone/kunlun-vue-ui-common';
+export * from './src';

package/dist/types/src/component/index.d.ts

@@ -0,0 +1,3 @@
+export * from './oio-color-picker';
+export * from './oio-date-time-picker';
+export * from './oio-modal';

package/dist/types/src/component/oio-color-picker/index.d.ts

@@ -0,0 +1 @@
+export { default as OioColorPicker } from './oio-color-picker.vue';

package/dist/types/src/component/oio-color-picker/oio-color-picker.vue.d.ts

@@ -0,0 +1,122 @@
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: StringConstructor;
+    };
+    defaultValue: {
+        type: StringConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    colorFormat: {
+        type: import("vue").PropType<import("@oinone/kunlun-vue-ui-common").ColorFormat | "hsl" | "hsv" | "hex" | "rgb">;
+        default: import("@oinone/kunlun-vue-ui-common").ColorFormat;
+    };
+    predefine: {
+        type: import("vue").PropType<string[]>;
+        default: string[];
+    };
+    showAlpha: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inputPlacement: {
+        type: import("vue").PropType<import("@oinone/kunlun-vue-ui-common").ColorInputPlacement | "append" | "prepend">;
+        default: import("@oinone/kunlun-vue-ui-common").ColorInputPlacement;
+    };
+    inputPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    inputReadonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledLastedColor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lastedColorCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    predefineColors: import("vue").ComputedRef<string[]>;
+    handleChange: (val?: string | undefined) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:value")[], "change" | "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+    };
+    defaultValue: {
+        type: StringConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    colorFormat: {
+        type: import("vue").PropType<import("@oinone/kunlun-vue-ui-common").ColorFormat | "hsl" | "hsv" | "hex" | "rgb">;
+        default: import("@oinone/kunlun-vue-ui-common").ColorFormat;
+    };
+    predefine: {
+        type: import("vue").PropType<string[]>;
+        default: string[];
+    };
+    showAlpha: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inputPlacement: {
+        type: import("vue").PropType<import("@oinone/kunlun-vue-ui-common").ColorInputPlacement | "append" | "prepend">;
+        default: import("@oinone/kunlun-vue-ui-common").ColorInputPlacement;
+    };
+    inputPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    inputReadonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledLastedColor: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lastedColorCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    showAlpha: boolean;
+    colorFormat: import("@oinone/kunlun-vue-ui-common").ColorFormat | "hsl" | "hsv" | "hex" | "rgb";
+    disabled: boolean;
+    predefine: string[];
+    readonly: boolean;
+    hasInput: boolean;
+    inputPlacement: import("@oinone/kunlun-vue-ui-common").ColorInputPlacement | "append" | "prepend";
+    inputPlaceholder: string;
+    inputReadonly: boolean;
+    disabledLastedColor: boolean;
+    lastedColorCount: number;
+}>;
+export default _default;

package/dist/types/src/component/oio-date-time-picker/index.d.ts

@@ -0,0 +1,4 @@
+export { default as OioDateTimePicker } from './oio-date-time-picker.vue';
+export { default as OioDatePicker } from './oio-date-picker.vue';
+export { default as OioTimePicker } from './oio-time-picker.vue';
+export { default as OioYearPicker } from './oio-year-picker.vue';

package/dist/types/src/component/oio-date-time-picker/oio-date-picker.vue.d.ts

@@ -0,0 +1,184 @@
+declare const _default: import("vue").DefineComponent<{
+    dateFormat: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueFormat: {
+        type: StringConstructor;
+        default: string;
+    };
+    convertFormat: {
+        type: import("vue").PropType<(val: string) => string | undefined>;
+        default: (val: string) => any;
+    };
+    disabledDate: {
+        type: import("vue").PropType<(date: any) => boolean>;
+    };
+    disabledTime: {
+        type: import("vue").PropType<((date: any) => {
+            disabledHours: number[];
+            disabledMinutes: number[];
+            disabledSeconds: number[];
+        }) | {
+            disabledHours?: (() => number[]) | undefined;
+            disabledMinutes?: (() => number[]) | undefined;
+            disabledSeconds?: (() => number[]) | undefined;
+        }>;
+    };
+    showToday: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: (DateConstructor | StringConstructor)[];
+    };
+    defaultValue: {
+        type: (DateConstructor | StringConstructor)[];
+    };
+    title: {
+        type: StringConstructor;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    format: {
+        type: StringConstructor;
+    };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTime: {
+        type: (BooleanConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    locale: {
+        type: ObjectConstructor;
+    };
+    dropdownClassName: {
+        type: import("vue").PropType<string | string[]>;
+    };
+    changeOpenValue: {
+        type: FunctionConstructor;
+    };
+    openPanelChange: {
+        type: FunctionConstructor;
+    };
+    closePanelChange: {
+        type: FunctionConstructor;
+    };
+    getTriggerContainer: {
+        type: FunctionConstructor;
+    };
+}, {
+    convertFormat: (val: string) => string | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:value"[], "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dateFormat: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueFormat: {
+        type: StringConstructor;
+        default: string;
+    };
+    convertFormat: {
+        type: import("vue").PropType<(val: string) => string | undefined>;
+        default: (val: string) => any;
+    };
+    disabledDate: {
+        type: import("vue").PropType<(date: any) => boolean>;
+    };
+    disabledTime: {
+        type: import("vue").PropType<((date: any) => {
+            disabledHours: number[];
+            disabledMinutes: number[];
+            disabledSeconds: number[];
+        }) | {
+            disabledHours?: (() => number[]) | undefined;
+            disabledMinutes?: (() => number[]) | undefined;
+            disabledSeconds?: (() => number[]) | undefined;
+        }>;
+    };
+    showToday: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: (DateConstructor | StringConstructor)[];
+    };
+    defaultValue: {
+        type: (DateConstructor | StringConstructor)[];
+    };
+    title: {
+        type: StringConstructor;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    format: {
+        type: StringConstructor;
+    };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTime: {
+        type: (BooleanConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    locale: {
+        type: ObjectConstructor;
+    };
+    dropdownClassName: {
+        type: import("vue").PropType<string | string[]>;
+    };
+    changeOpenValue: {
+        type: FunctionConstructor;
+    };
+    openPanelChange: {
+        type: FunctionConstructor;
+    };
+    closePanelChange: {
+        type: FunctionConstructor;
+    };
+    getTriggerContainer: {
+        type: FunctionConstructor;
+    };
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    dateFormat: string;
+    valueFormat: string;
+    convertFormat: (val: string) => string | undefined;
+    showToday: boolean;
+    readonly: boolean;
+    disabled: boolean;
+    allowClear: boolean;
+    showTime: boolean | Record<string, any>;
+    open: boolean;
+}>;
+export default _default;

package/dist/types/src/component/oio-date-time-picker/oio-date-time-picker.vue.d.ts

@@ -0,0 +1,232 @@
+import { DateTimePickerMode } from '@oinone/kunlun-shared';
+declare const _default: import("vue").DefineComponent<{
+    mode: {
+        type: import("vue").PropType<DateTimePickerMode>;
+        default: DateTimePickerMode;
+    };
+    disabledDate: {
+        type: import("vue").PropType<(date: any) => boolean>;
+    };
+    disabledTime: {
+        type: import("vue").PropType<((date: any) => {
+            disabledHours: number[];
+            disabledMinutes: number[];
+            disabledSeconds: number[];
+        }) | {
+            disabledHours?: (() => number[]) | undefined;
+            disabledMinutes?: (() => number[]) | undefined;
+            disabledSeconds?: (() => number[]) | undefined;
+        }>;
+    };
+    format: {
+        type: StringConstructor;
+    };
+    dateFormat: {
+        type: StringConstructor;
+        default: string;
+    };
+    timeFormat: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueFormat: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasDateFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasTimeFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    convertFormat: {
+        type: import("vue").PropType<(val: string) => string | undefined>;
+    };
+    convertDateFormat: {
+        type: import("vue").PropType<(val: string) => string | undefined>;
+    };
+    convertTimeFormat: {
+        type: import("vue").PropType<(val: string) => string | undefined>;
+    };
+    showToday: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: (DateConstructor | StringConstructor)[];
+    };
+    defaultValue: {
+        type: (DateConstructor | StringConstructor)[];
+    };
+    title: {
+        type: StringConstructor;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTime: {
+        type: (BooleanConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    locale: {
+        type: ObjectConstructor;
+    };
+    dropdownClassName: {
+        type: import("vue").PropType<string | string[]>;
+    };
+    changeOpenValue: {
+        type: FunctionConstructor;
+    };
+    openPanelChange: {
+        type: FunctionConstructor;
+    };
+    closePanelChange: {
+        type: FunctionConstructor;
+    };
+    getTriggerContainer: {
+        type: FunctionConstructor;
+    };
+}, {
+    format: import("vue").ComputedRef<string>;
+    valueFormat: import("vue").ComputedRef<string>;
+    defaultValue: import("vue").ComputedRef<Date | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:value"[], "update:value", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    mode: {
+        type: import("vue").PropType<DateTimePickerMode>;
+        default: DateTimePickerMode;
+    };
+    disabledDate: {
+        type: import("vue").PropType<(date: any) => boolean>;
+    };
+    disabledTime: {
+        type: import("vue").PropType<((date: any) => {
+            disabledHours: number[];
+            disabledMinutes: number[];
+            disabledSeconds: number[];
+        }) | {
+            disabledHours?: (() => number[]) | undefined;
+            disabledMinutes?: (() => number[]) | undefined;
+            disabledSeconds?: (() => number[]) | undefined;
+        }>;
+    };
+    format: {
+        type: StringConstructor;
+    };
+    dateFormat: {
+        type: StringConstructor;
+        default: string;
+    };
+    timeFormat: {
+        type: StringConstructor;
+        default: string;
+    };
+    valueFormat: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasDateFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasTimeFormat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    convertFormat: {
+        type: import("vue").PropType<(val: string) => string | undefined>;
+    };
+    convertDateFormat: {
+        type: import("vue").PropType<(val: string) => string | undefined>;
+    };
+    convertTimeFormat: {
+        type: import("vue").PropType<(val: string) => string | undefined>;
+    };
+    showToday: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: (DateConstructor | StringConstructor)[];
+    };
+    defaultValue: {
+        type: (DateConstructor | StringConstructor)[];
+    };
+    title: {
+        type: StringConstructor;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    allowClear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showTime: {
+        type: (BooleanConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    locale: {
+        type: ObjectConstructor;
+    };
+    dropdownClassName: {
+        type: import("vue").PropType<string | string[]>;
+    };
+    changeOpenValue: {
+        type: FunctionConstructor;
+    };
+    openPanelChange: {
+        type: FunctionConstructor;
+    };
+    closePanelChange: {
+        type: FunctionConstructor;
+    };
+    getTriggerContainer: {
+        type: FunctionConstructor;
+    };
+}>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    valueFormat: string;
+    readonly: boolean;
+    disabled: boolean;
+    mode: DateTimePickerMode;
+    dateFormat: string;
+    timeFormat: string;
+    hasDateFormat: boolean;
+    hasTimeFormat: boolean;
+    showToday: boolean;
+    allowClear: boolean;
+    showTime: boolean | Record<string, any>;
+    open: boolean;
+}>;
+export default _default;