Merge pull request #675 from yumingqian123/master
This commit is contained in:
当耐特
GitHub
commit
de2d00d682
|
|
@ -11,27 +11,8 @@
|
|||
|
||||
<body>
|
||||
<h1>HTML Mode</h1>
|
||||
<o-time-picker size='medium'></o-time-picker>
|
||||
<o-time-picker size='medium' ></o-time-picker>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<!-- <!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>timepicker</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html> -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
span {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
|
@ -1 +1 @@
|
|||
|
||||
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAAA;EACE","file":"index.css"}
|
||||
|
|
@ -1,62 +1,3 @@
|
|||
// import { tag, h, WeElement, OverwriteProps } from 'omi'
|
||||
|
||||
// import * as css from './index.scss'
|
||||
|
||||
// export type Attrs = {
|
||||
// count?: number,
|
||||
// onCountChanged?: (evt: CustomEvent) => void
|
||||
// }
|
||||
|
||||
// const tagName = 'o-counter'
|
||||
// declare global {
|
||||
// namespace JSX {
|
||||
// interface IntrinsicElements {
|
||||
// [tagName]: Omi.Props & Attrs
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// export type Props = OverwriteProps<Attrs, { count: number }>
|
||||
|
||||
// @tag(tagName)
|
||||
// export default class Counter extends WeElement<Props> {
|
||||
|
||||
// static css = css.default ? css.default : css
|
||||
|
||||
// static defaultProps = {
|
||||
// count: 1
|
||||
// }
|
||||
|
||||
// static propTypes = {
|
||||
// count: Number
|
||||
// }
|
||||
|
||||
// minus = () => {
|
||||
// this.updateProps({
|
||||
// count: this.props.count - 1
|
||||
// })
|
||||
// this.fire('CountChanged', this.props.count)
|
||||
// }
|
||||
|
||||
// plus = () => {
|
||||
// this.updateProps({
|
||||
// count: this.props.count + 1
|
||||
// })
|
||||
// this.fire('CountChanged', this.props.count)
|
||||
// }
|
||||
|
||||
// render(props: Props) {
|
||||
// return (
|
||||
// // <h.f></h.f> or <></> are supported
|
||||
// <h.f>
|
||||
// <button onClick={this.minus}>-</button>
|
||||
// <span>{props.count}</span>
|
||||
// <button onClick={this.plus}>+</button>
|
||||
// </h.f>
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
|
||||
import { tag, WeElement, h, render, OverwriteProps } from 'omi'
|
||||
import flatpickr from 'flatpickr'
|
||||
|
|
@ -177,12 +118,12 @@ export default class TimePicker extends WeElement<Props> {
|
|||
await styleLoader.initStyles()
|
||||
|
||||
const {locale, position,size, ...other } = this.props
|
||||
console.log(this)
|
||||
|
||||
flatpickr(this.shadowRoot.querySelector('o-input'), {
|
||||
locale: locale === 'zh' ? Mandarin : null,
|
||||
...other,
|
||||
})
|
||||
console.log(this)
|
||||
console.log(this)
|
||||
}
|
||||
isShow = false
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,6 @@ export default class StyleLoader {
|
|||
isThemeLoaded(): boolean {
|
||||
// special theme value to prevent any loading of styles
|
||||
if (this.theme === FlatpickrTheme.none) return true;
|
||||
|
||||
const styleSheetSources: Array<string | null> = Array.from(document.styleSheets).map(ss => ss.href);
|
||||
return styleSheetSources.some(sss => sss != null && new RegExp(themeUrlPrefix).test(sss));
|
||||
}
|
||||
|
|
@ -75,6 +74,8 @@ export default class StyleLoader {
|
|||
styleElem.rel = 'stylesheet';
|
||||
styleElem.type = 'text/css';
|
||||
styleElem.href = themeUrl;
|
||||
//console.log(this.theme)
|
||||
//console.log(styleElem)
|
||||
document.head.append(styleElem);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,5 +22,14 @@ describe('o-time-picker ', () => {
|
|||
const el = await fixture(html`<o-time-picker size="medium"></o-time-picker>`)
|
||||
expect(el.shadowRoot.innerHTML).to.equal(`<div><o-input id="myinput" size="medium" css=".o-input input {width: auto;background-color:undefined;color:undefined;}" type="text"></o-input></div>`)
|
||||
})
|
||||
|
||||
// it('defaultHour prop', async () => {
|
||||
// // const el = await fixture(html`<div class="flatpickr-calendar hasTime noCalendar animate open arrowTop arrowLeft" tabindex="-1" style="top: 123.542px; left: 8px; right: auto;"></div>`)
|
||||
|
||||
// const el = await fixture(html`<o-time-picker></o-time-picker>`)
|
||||
// const flat = el.querySelector(".flatpickr-calendar-hasTime-noCalendar-animate")
|
||||
// console.log(flat)
|
||||
// expect(flat).to.equal(`<div></div>`)
|
||||
// })
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import { WeElement, h, tag } from 'omi'
|
||||
import { tw, sheet } from 'omi-twind'
|
||||
// import '../../../../../components/time-picker/src/index'
|
||||
//import '@omiu/time-picker'
|
||||
|
||||
import '@omiu/time-picker'
|
||||
|
||||
import '../docs/admin-docs'
|
||||
import './code-demo'
|
||||
//import '@omiu/date-picker'
|
||||
import './code-demo/container'
|
||||
|
||||
interface Props { }
|
||||
interface Props {}
|
||||
|
||||
const tagName = 'time-picker-component'
|
||||
declare global {
|
||||
|
|
@ -20,8 +21,6 @@ declare global {
|
|||
@tag(tagName)
|
||||
export default class extends WeElement<Props> {
|
||||
static css = sheet.target
|
||||
|
||||
|
||||
mdA = `
|
||||
\`\`\`html
|
||||
<o-time-picker></o-time-picker>
|
||||
|
|
@ -64,66 +63,62 @@ export default class extends WeElement<Props> {
|
|||
<o-time-picker time_24hr="true" ></o-time-picker>
|
||||
\`\`\`
|
||||
`
|
||||
render() {
|
||||
return <div class={tw`px-4`}>
|
||||
|
||||
<div class={tw`flex flex-col sm:flex-row md:flex-row flex-wrap gap-x-4`}>
|
||||
<code-demo class={tw`flex-1 md:w-3/6`} title="基本" describe="最简单的 Loading" code={this.mdA}>
|
||||
installed() {}
|
||||
|
||||
render() {
|
||||
const gridItem = tw`px-2 w-full md:w-6/12`
|
||||
|
||||
return (
|
||||
<code-demo-container>
|
||||
<code-demo class={tw``} title="基本" describe="最简单的time-picker" code={this.mdA}>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-time-picker></o-time-picker>
|
||||
</div>
|
||||
</code-demo>
|
||||
<code-demo class={tw`flex-1 md:w-3/6`} title="不同宽度" describe="支持传入 width 控制宽度" code={this.mdC}>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<code-demo class={tw``} title="不同宽度" describe="支持传入 width 控制宽度" code={this.mdC}>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-time-picker width="250px" > </o-time-picker>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
<code-demo class={tw`flex-1 md:w-3/6`} title="不同尺寸" describe="size可以设置为'medium'，'small'，'mini'" code={this.mdB}>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<code-demo class={tw``} title="不同尺寸" describe="size可以设置为'medium'，'small'，'mini'" code={this.mdB}>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-time-picker size="mini" style="margin: auto 1px"></o-time-picker>
|
||||
<o-time-picker size="small" style="margin: auto 1px"></o-time-picker>
|
||||
<o-time-picker size="medium" style="margin: auto 1px"></o-time-picker>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
{/* <code-demo class={tw`flex-1 md:w-3/6`} title="不同主题" describe="size可以设置为'medium'，'small'，'mini'" code={this.mdB}>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-time-picker theme="dark" ></o-time-picker>
|
||||
</div>
|
||||
</code-demo> */}
|
||||
|
||||
<code-demo class={tw`flex-1 md:w-3/6`} title="设置占位符" describe="支持传入 placeholder 控制占位符" code={this.mdD}>
|
||||
<code-demo class={tw``} title="设置占位符" describe="支持传入 placeholder 控制占位符" code={this.mdD}>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-time-picker placeholder="请选择时间" ></o-time-picker>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
<code-demo class={tw`flex-1 md:w-3/6`} title="设置默认时间" describe="支持传入 defaultHour、defaultMinute设置默认小时、分钟" code={this.mdE}>
|
||||
<code-demo class={tw``} title="设置默认时间" describe="支持传入 defaultHour、defaultMinute设置默认小时、分钟" code={this.mdE}>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-time-picker defaultHour={1} defaultMinute={2}></o-time-picker>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
<code-demo class={tw`flex-1 md:w-3/6`} title="禁用秒" describe="支持传入 enableSeconds 禁用秒" code={this.mdF}>
|
||||
<code-demo class={tw``} title="禁用秒" describe="支持传入 enableSeconds 禁用秒" code={this.mdF}>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-time-picker enableSeconds="false"></o-time-picker>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
<code-demo class={tw`flex-1 md:w-3/6`} title="设置小时、分钟增量" describe="支持传入 hourIncrement、minuteIncrement 设置小时、分钟增量" code={this.mdG}>
|
||||
<code-demo class={tw``} title="设置小时、分钟增量" describe="支持传入 hourIncrement、minuteIncrement 设置小时、分钟增量" code={this.mdG}>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-time-picker hourIncrement={2} minuteIncrement={1} ></o-time-picker>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
<code-demo class={tw`flex-1 md:w-3/6`} title="设置24小时制" describe="支持传入 time_24hr 设置是否为24小时制" code={this.mdH}>
|
||||
<code-demo class={tw``} title="设置24小时制" describe="支持传入 time_24hr 设置是否为24小时制" code={this.mdH}>
|
||||
<div slot="demo" class={tw`px-5 py-5`}>
|
||||
<o-time-picker time_24hr="true" ></o-time-picker>
|
||||
<o-time-picker time_24hr="true" ></o-time-picker>
|
||||
</div>
|
||||
</code-demo>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</code-demo-container>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -166,11 +166,11 @@ export function genNavTree(localeMap, locale) {
|
|||
href: '#/progress-component'
|
||||
}
|
||||
// 待优化
|
||||
// {
|
||||
// label: localeMap.base.Timepicker,
|
||||
// id: genId(),
|
||||
// href: '#/time-picker-component',
|
||||
// }
|
||||
{
|
||||
label: localeMap.base.Timepicker,
|
||||
id: genId(),
|
||||
href: '#/time-picker-component',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue