@geektech/one 0.1.0 → 0.3.1

package/README-zh.md

@@ -50,12 +50,15 @@ createApp({ root: App }).mount();
 
 ## 组件分类
 
-- 基础：`OneButton`、`OneInput`
-- 表单：`OneForm`、`OneFormItem`、`OneSelect`、`OneCheckbox`、
-  `OneCheckboxGroup`、`OneSwitch`
+- 基础：`OneButton`
+- 表单：`OneForm`、`OneFormItem`、`OneInput`、`OneSelect`、`OneTimePicker`、
+  `OneCheckbox`、`OneCheckboxGroup`、`OneRadio`、`OneRadioGroup`、`OneSwitch`、
+  `OneSlider`、`OneRate`、`OneUpload`
 - 导航：`OneTabs`、`OneBreadcrumb`、`OnePagination`
-- 数据展示：`OneCard`、`OneTag`、`OneBadge`、`OneEmpty`
-- 反馈与浮层：`OneAlert`、`OneMessage`、`OneDialog`、`OneTooltip`
+- 数据展示：`OneCard`、`OneTag`、`OneBadge`、`OneAvatar`、`OneProgress`、
+  `OneEmpty`、`OneTable`、`OneCollapse`、`OneSkeleton`
+- 反馈与浮层：`OneAlert`、`OneMessage`、`OneDialog`、`OneTooltip`、
+  `OneLoading`
 
 ## 导航
 
@@ -119,8 +122,9 @@ void basicPagination;
 
 ## 数据展示
 
-标签适合表达紧凑状态，徽标适合展示数量，无数据时使用空状态。`OneEmpty`
-支持通过 `actions` 插槽提供下一步操作。
+标签适合表达紧凑状态，徽标适合展示数量，头像适合表达身份，进度条适合表达完成
+度，无数据时使用空状态，表格适合组织行列数据，折叠面板适合组织分组详情，加载中
+使用骨架占位。`OneEmpty` 支持通过 `actions` 插槽提供下一步操作。
 
 ```ts
 import { OneBadge, OneButton, OneEmpty, OneTag } from '@geektech/one';
@@ -137,13 +141,46 @@ const actions = [
 new OneEmpty({ description: '暂无结果', children: actions });
 ```
 
+```ts
+import { OneAvatar, OneProgress } from '@geektech/one';
+
+new OneAvatar({ text: 'M', variant: 'primary' });
+new OneAvatar({ src: '/avatar.png', alt: '头像', shape: 'square' });
+new OneProgress({ percent: 65, showText: true });
+new OneProgress({ percent: 30, variant: 'success' });
+```
+
+```ts
+import { OneTable, OneCollapse, OneSkeleton } from '@geektech/one';
+
+new OneTable({
+  data: [
+    { name: '林晚', role: '设计' },
+    { name: '苏北', role: '前端' },
+  ],
+  columns: [
+    { key: 'name', title: '姓名' },
+    { key: 'role', title: '角色' },
+  ],
+});
+new OneCollapse({
+  accordion: true,
+  defaultActive: ['basic'],
+  items: [
+    { value: 'basic', title: '基础用法', children: ['内容'] },
+    { value: 'advanced', title: '高级用法', children: ['更多内容'] },
+  ],
+});
+new OneSkeleton({ rows: 3, title: true, avatar: true });
+```
+
 ## 反馈与浮层
 
 持续显示的页面内反馈使用 `OneAlert`，附着到单个触发元素的简短说明使用
-`OneTooltip`：
+`OneTooltip`，进行中的加载状态使用 `OneLoading`：
 
 ```ts
-import { OneAlert, OneButton, OneTooltip } from '@geektech/one';
+import { OneAlert, OneButton, OneLoading, OneTooltip } from '@geektech/one';
 
 const alert = new OneAlert({
   title: '保存成功',
@@ -156,6 +193,8 @@ const tooltip = new OneTooltip({
   placement: 'bottom-end',
   children: [{ component: OneButton, children: ['复制'] }],
 });
+
+const loading = new OneLoading({ size: 'md', label: '加载中' });
 ```
 
 临时消息和确认流程可以使用命令式服务：
@@ -220,6 +259,70 @@ uncontrolled.on('change', (payload) => {
 });
 ```
 
+## 选择与时间
+
+单选按钮从多个选项中选一个，时间选择器提供可编辑文本输入，点击展开时/分/秒下拉
+面板。二者都支持受控与非受控模式。
+
+```ts
+import {
+  OneRadio,
+  OneRadioGroup,
+  OneTimePicker,
+  type OneFieldValueEvent,
+} from '@geektech/one';
+
+const radio = new OneRadio({ value: 'design', defaultChecked: true });
+const group = new OneRadioGroup({
+  defaultValue: 'weekly',
+  ariaLabel: '通知频率',
+  options: [
+    { value: 'daily', label: '每天' },
+    { value: 'weekly', label: '每周' },
+  ],
+});
+group.on('change', (payload) => {
+  const event = payload as OneFieldValueEvent<string>;
+  console.log(event.value);
+});
+
+new OneTimePicker({ defaultValue: '09:30', ariaLabel: '开始时间' });
+```
+
+## 滑块、评分与上传
+
+滑块在范围内选择一个数值，评分用星星表达打分，上传用于收集本地文件元数据。
+三者都支持受控与非受控模式。
+
+```ts
+import {
+  OneSlider,
+  OneRate,
+  OneUpload,
+  type OneSliderValueEvent,
+  type OneRateValueEvent,
+  type OneUploadChangeEvent,
+} from '@geektech/one';
+
+const slider = new OneSlider({ defaultValue: 60, showValue: true });
+slider.on('change', (payload) => {
+  const event = payload as OneSliderValueEvent;
+  console.log(event.value);
+});
+
+const rating = new OneRate({ defaultValue: 4, allowClear: true });
+rating.on('change', (payload) => {
+  const event = payload as OneRateValueEvent;
+  console.log(event.value);
+});
+
+const upload = new OneUpload({ multiple: true, ariaLabel: '附件' });
+upload.on('change', (payload) => {
+  const event = payload as OneUploadChangeEvent;
+  console.log(event.files.map((file) => file.name));
+});
+```
+
 ## 卡片插槽
 
 带有 `slot: 'header'` 或 `slot: 'footer'` 的子节点进入对应命名插槽，未指定

package/README.md

@@ -50,12 +50,15 @@ createApp({ root: App }).mount();
 
 ## Component categories
 
-- Basic: `OneButton`, `OneInput`
-- Form: `OneForm`, `OneFormItem`, `OneSelect`, `OneCheckbox`,
-  `OneCheckboxGroup`, `OneSwitch`
+- Basic: `OneButton`
+- Form: `OneForm`, `OneFormItem`, `OneInput`, `OneSelect`, `OneTimePicker`,
+  `OneCheckbox`, `OneCheckboxGroup`, `OneRadio`, `OneRadioGroup`, `OneSwitch`,
+  `OneSlider`, `OneRate`, `OneUpload`
 - Navigation: `OneTabs`, `OneBreadcrumb`, `OnePagination`
-- Data display: `OneCard`, `OneTag`, `OneBadge`, `OneEmpty`
-- Feedback and overlays: `OneAlert`, `OneMessage`, `OneDialog`, `OneTooltip`
+- Data display: `OneCard`, `OneTag`, `OneBadge`, `OneAvatar`, `OneProgress`,
+  `OneEmpty`, `OneTable`, `OneCollapse`, `OneSkeleton`
+- Feedback and overlays: `OneAlert`, `OneMessage`, `OneDialog`, `OneTooltip`,
+  `OneLoading`
 
 ## Navigation
 
@@ -120,8 +123,10 @@ void basicPagination;
 
 ## Data display
 
-Use tags for compact status, badges for counts, and empty states when a view has
-no content. `OneEmpty` accepts an `actions` slot for the next useful action.
+Use tags for compact status, badges for counts, avatars for identity, progress
+bars for completion, empty states when a view has no content, tables for row
+data, collapsible panels for grouped detail, and skeletons while content loads.
+`OneEmpty` accepts an `actions` slot for the next useful action.
 
 ```ts
 import { OneBadge, OneButton, OneEmpty, OneTag } from '@geektech/one';
@@ -138,13 +143,47 @@ const actions = [
 new OneEmpty({ description: 'No results', children: actions });
 ```
 
+```ts
+import { OneAvatar, OneProgress } from '@geektech/one';
+
+new OneAvatar({ text: 'M', variant: 'primary' });
+new OneAvatar({ src: '/avatar.png', alt: 'Avatar', shape: 'square' });
+new OneProgress({ percent: 65, showText: true });
+new OneProgress({ percent: 30, variant: 'success' });
+```
+
+```ts
+import { OneTable, OneCollapse, OneSkeleton } from '@geektech/one';
+
+new OneTable({
+  data: [
+    { name: 'Eve Lin', role: 'Design' },
+    { name: 'Ben Su', role: 'Frontend' },
+  ],
+  columns: [
+    { key: 'name', title: 'Name' },
+    { key: 'role', title: 'Role' },
+  ],
+});
+new OneCollapse({
+  accordion: true,
+  defaultActive: ['basic'],
+  items: [
+    { value: 'basic', title: 'Basic usage', children: ['Content'] },
+    { value: 'advanced', title: 'Advanced usage', children: ['More content'] },
+  ],
+});
+new OneSkeleton({ rows: 3, title: true, avatar: true });
+```
+
 ## Feedback and overlays
 
-Use `OneAlert` for persistent inline feedback and `OneTooltip` for a short
-description attached to one trigger element:
+Use `OneAlert` for persistent inline feedback, `OneTooltip` for a short
+description attached to one trigger element, and `OneLoading` for an
+in-progress indicator:
 
 ```ts
-import { OneAlert, OneButton, OneTooltip } from '@geektech/one';
+import { OneAlert, OneButton, OneLoading, OneTooltip } from '@geektech/one';
 
 const alert = new OneAlert({
   title: 'Saved',
@@ -157,6 +196,8 @@ const tooltip = new OneTooltip({
   placement: 'bottom-end',
   children: [{ component: OneButton, children: ['Copy'] }],
 });
+
+const loading = new OneLoading({ size: 'md', label: 'Loading' });
 ```
 
 Use the imperative services for transient messages and confirmation flows:
@@ -221,6 +262,72 @@ uncontrolled.on('change', (payload) => {
 });
 ```
 
+## Selection and time
+
+Radio buttons pick one option out of several. Time pickers offer an editable
+text input plus a click-to-open hour/minute/second dropdown. Both support
+controlled and uncontrolled modes.
+
+```ts
+import {
+  OneRadio,
+  OneRadioGroup,
+  OneTimePicker,
+  type OneFieldValueEvent,
+} from '@geektech/one';
+
+const radio = new OneRadio({ value: 'design', defaultChecked: true });
+const group = new OneRadioGroup({
+  defaultValue: 'weekly',
+  ariaLabel: 'Frequency',
+  options: [
+    { value: 'daily', label: 'Daily' },
+    { value: 'weekly', label: 'Weekly' },
+  ],
+});
+group.on('change', (payload) => {
+  const event = payload as OneFieldValueEvent<string>;
+  console.log(event.value);
+});
+
+new OneTimePicker({ defaultValue: '09:30', ariaLabel: 'Start time' });
+```
+
+## Sliders, ratings and uploads
+
+Sliders pick a number within a range, ratings express a star score, and uploads
+collect local file metadata. All three support controlled and uncontrolled
+modes.
+
+```ts
+import {
+  OneSlider,
+  OneRate,
+  OneUpload,
+  type OneSliderValueEvent,
+  type OneRateValueEvent,
+  type OneUploadChangeEvent,
+} from '@geektech/one';
+
+const slider = new OneSlider({ defaultValue: 60, showValue: true });
+slider.on('change', (payload) => {
+  const event = payload as OneSliderValueEvent;
+  console.log(event.value);
+});
+
+const rating = new OneRate({ defaultValue: 4, allowClear: true });
+rating.on('change', (payload) => {
+  const event = payload as OneRateValueEvent;
+  console.log(event.value);
+});
+
+const upload = new OneUpload({ multiple: true, ariaLabel: 'Attachments' });
+upload.on('change', (payload) => {
+  const event = payload as OneUploadChangeEvent;
+  console.log(event.files.map((file) => file.name));
+});
+```
+
 ## Card slots
 
 Children with `slot: 'header'` or `slot: 'footer'` fill the named regions;

package/dist/avatar/OneAvatar.d.ts

@@ -0,0 +1,21 @@
+import { Component, type VNode } from '@geektech/tsone';
+import { type OneDataDisplayVariant } from '../data-display';
+import { type OneNamedStyle } from '../styles/shared';
+import type { OneComponentSize } from '../types';
+export type OneAvatarShape = 'circle' | 'square';
+export interface OneAvatarProps {
+    src?: string;
+    alt?: string;
+    text?: string;
+    size?: OneComponentSize;
+    shape?: OneAvatarShape;
+    variant?: OneDataDisplayVariant;
+    ariaLabel?: string;
+    children?: Array<VNode | string>;
+}
+export declare const ONE_AVATAR_STYLES: OneNamedStyle[];
+export declare class OneAvatar extends Component<OneAvatarProps> {
+    protected initState(): object;
+    protected initStyles(): void;
+    protected render(): VNode;
+}

package/dist/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { OneAvatar } from './OneAvatar';
+export type { OneAvatarProps, OneAvatarShape } from './OneAvatar';

package/dist/categories.d.ts

@@ -2,11 +2,11 @@ export type OneComponentCategory = 'basic' | 'form' | 'navigation' | 'data-displ
 export declare const ONE_COMPONENT_CATEGORIES: readonly [{
     readonly id: "basic";
     readonly label: "基础";
-    readonly components: readonly ["OneButton", "OneInput"];
+    readonly components: readonly ["OneButton"];
 }, {
     readonly id: "form";
     readonly label: "表单";
-    readonly components: readonly ["OneForm", "OneFormItem", "OneSelect", "OneCheckbox", "OneCheckboxGroup", "OneSwitch"];
+    readonly components: readonly ["OneForm", "OneFormItem", "OneInput", "OneSelect", "OneTimePicker", "OneCheckbox", "OneCheckboxGroup", "OneRadio", "OneRadioGroup", "OneSwitch", "OneSlider", "OneRate", "OneUpload"];
 }, {
     readonly id: "navigation";
     readonly label: "导航";
@@ -14,9 +14,9 @@ export declare const ONE_COMPONENT_CATEGORIES: readonly [{
 }, {
     readonly id: "data-display";
     readonly label: "数据展示";
-    readonly components: readonly ["OneCard", "OneTag", "OneBadge", "OneEmpty"];
+    readonly components: readonly ["OneCard", "OneAvatar", "OneTag", "OneBadge", "OneProgress", "OneEmpty", "OneTable", "OneCollapse", "OneSkeleton"];
 }, {
     readonly id: "feedback";
     readonly label: "反馈与浮层";
-    readonly components: readonly ["OneAlert", "OneMessage", "OneDialog", "OneTooltip"];
+    readonly components: readonly ["OneAlert", "OneMessage", "OneDialog", "OneTooltip", "OneLoading"];
 }];

package/dist/collapse/OneCollapse.d.ts

@@ -0,0 +1,31 @@
+import { Component, type VNode } from '@geektech/tsone';
+import { type OneNamedStyle } from '../styles/shared';
+export interface OneCollapseItem {
+    value: string;
+    title: string;
+    children?: Array<VNode | string>;
+    disabled?: boolean;
+}
+export interface OneCollapseChangeEvent {
+    value: string[];
+    originalEvent: Event;
+}
+export interface OneCollapseProps {
+    items?: readonly OneCollapseItem[];
+    defaultActive?: readonly string[];
+    active?: readonly string[];
+    accordion?: boolean;
+    ariaLabel?: string;
+}
+interface OneCollapseState {
+    internalActive: string[];
+}
+export declare const ONE_COLLAPSE_STYLES: OneNamedStyle[];
+export declare class OneCollapse extends Component<OneCollapseProps, OneCollapseState> {
+    protected initState(): OneCollapseState;
+    protected initStyles(): void;
+    protected render(): VNode;
+    private getActive;
+    private toggle;
+}
+export {};

package/dist/collapse/index.d.ts

@@ -0,0 +1,2 @@
+export { OneCollapse } from './OneCollapse';
+export type { OneCollapseChangeEvent, OneCollapseItem, OneCollapseProps, } from './OneCollapse';

package/dist/index.d.ts

@@ -10,8 +10,18 @@ export type { OneCheckboxGroupProps, OneCheckboxProps } from './checkbox';
 export { OneCheckboxGroup } from './checkbox';
 export { OneSwitch } from './switch';
 export type { OneSwitchProps } from './switch';
+export { OneRadio, OneRadioGroup } from './radio';
+export type { OneRadioGroupProps, OneRadioProps } from './radio';
 export { OneSelect } from './select';
 export type { OneSelectOption, OneSelectOptionGroup, OneSelectProps, } from './select';
+export { OneTimePicker } from './time-picker';
+export type { OneTimePickerProps, OneTimePickerValueEvent, } from './time-picker';
+export { OneSlider } from './slider';
+export type { OneSliderProps, OneSliderValueEvent } from './slider';
+export { OneRate } from './rate';
+export type { OneRateProps, OneRateValueEvent } from './rate';
+export { OneUpload, formatOneFileSize } from './upload';
+export type { OneUploadChangeEvent, OneUploadFile, OneUploadProps, } from './upload';
 export { OneTabs } from './tabs';
 export type { OneTabItem, OneTabsChangeEvent, OneTabsProps } from './tabs';
 export { OneBreadcrumb } from './breadcrumb';
@@ -29,6 +39,16 @@ export { OneBadge } from './badge';
 export type { OneBadgeProps } from './badge';
 export { OneEmpty } from './empty';
 export type { OneEmptyProps } from './empty';
+export { OneAvatar } from './avatar';
+export type { OneAvatarProps, OneAvatarShape } from './avatar';
+export { OneProgress } from './progress';
+export type { OneProgressProps } from './progress';
+export { OneTable } from './table';
+export type { OneTableColumn, OneTableProps, OneTableRow } from './table';
+export { OneCollapse } from './collapse';
+export type { OneCollapseChangeEvent, OneCollapseItem, OneCollapseProps, } from './collapse';
+export { OneSkeleton } from './skeleton';
+export type { OneSkeletonProps } from './skeleton';
 export { ONE_THEME_DEFAULTS } from './styles/shared';
 export { ONE_DEFAULT_THEME, OneThemeConfigError, OneThemeEnvironmentError, OneThemeNotFoundError, oneTheme, } from './theme';
 export type { OneResolvedTheme, OneThemeBorder, OneThemeColors, OneThemeDefinition, OneThemeInitOptions, OneThemeRadius, OneThemeService, OneThemeTypography, } from './theme';
@@ -42,5 +62,7 @@ export { OneDialog, OneDialogService, createOneDialogService, oneDialog, } from
 export type { OneDialogProps, OneDialogServiceOptions } from './dialog';
 export { OneTooltip } from './tooltip';
 export type { OneTooltipProps, OneTooltipTrigger } from './tooltip';
+export { OneLoading } from './loading';
+export type { OneLoadingProps } from './loading';
 export declare const ONE_NAME = "@geektech/one";
-export declare const ONE_VERSION = "0.0.1";
+export declare const ONE_VERSION = "0.3.1";