huibo-ui 0.4.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{a11y-802de67a.js → a11y-4385c871.js} +17 -2
- package/dist/cjs/a11y-4385c871.js.map +1 -0
- package/dist/cjs/{date-helpers-1ffddc59.js → date-helpers-c05ef385.js} +5 -16
- package/dist/cjs/date-helpers-c05ef385.js.map +1 -0
- package/dist/cjs/hb-alert.cjs.entry.js +2 -1
- package/dist/cjs/hb-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-calendar.cjs.entry.js +2 -2
- package/dist/cjs/hb-calendar.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-cascader.cjs.entry.js +48 -12
- package/dist/cjs/hb-cascader.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-checkbox-group.cjs.entry.js +12 -8
- package/dist/cjs/hb-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-checkbox.cjs.entry.js +9 -4
- package/dist/cjs/hb-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-collapse-item.cjs.entry.js +13 -4
- package/dist/cjs/hb-collapse-item.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-collapse.cjs.entry.js +20 -15
- package/dist/cjs/hb-collapse.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-color-picker.cjs.entry.js +22 -19
- package/dist/cjs/hb-color-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-date-picker-pane.cjs.entry.js +1 -1
- package/dist/cjs/hb-date-picker.cjs.entry.js +13 -10
- package/dist/cjs/hb-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-date-range-picker.cjs.entry.js +1 -1
- package/dist/cjs/hb-date-time-picker.cjs.entry.js +1 -1
- package/dist/cjs/hb-descriptions.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-dialog.cjs.entry.js +51 -12
- package/dist/cjs/hb-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-drawer.cjs.entry.js +34 -4
- package/dist/cjs/hb-drawer.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-dropdown.cjs.entry.js +27 -15
- package/dist/cjs/hb-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-empty.cjs.entry.js +1 -1
- package/dist/cjs/hb-float-button.cjs.entry.js +2 -2
- package/dist/cjs/hb-form-item.cjs.entry.js +67 -16
- package/dist/cjs/hb-form-item.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-form.cjs.entry.js +115 -7
- package/dist/cjs/hb-form.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-image-preview.cjs.entry.js +1 -1
- package/dist/cjs/hb-image-preview.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-image.cjs.entry.js +21 -3
- package/dist/cjs/hb-image.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-input-number.cjs.entry.js +7 -7
- package/dist/cjs/hb-input-number.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-input-tag.cjs.entry.js +2 -2
- package/dist/cjs/hb-input.cjs.entry.js +3 -2
- package/dist/cjs/hb-input.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-layout.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-link.cjs.entry.js +2 -2
- package/dist/cjs/hb-loading.cjs.entry.js +2 -2
- package/dist/cjs/hb-menu-item.cjs.entry.js +14 -5
- package/dist/cjs/hb-menu-item.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-menu.cjs.entry.js +2 -2
- package/dist/cjs/hb-message.cjs.entry.js +13 -4
- package/dist/cjs/hb-message.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-page-header.cjs.entry.js +1 -1
- package/dist/cjs/hb-pagination.cjs.entry.js +8 -5
- package/dist/cjs/hb-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-popconfirm.cjs.entry.js +27 -8
- package/dist/cjs/hb-popconfirm.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-popover.cjs.entry.js +26 -14
- package/dist/cjs/hb-popover.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-progress.cjs.entry.js +1 -1
- package/dist/cjs/hb-radio.cjs.entry.js +8 -3
- package/dist/cjs/hb-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-rate.cjs.entry.js +3 -3
- package/dist/cjs/hb-rate.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-row.cjs.entry.js +2 -2
- package/dist/cjs/hb-scrollbar.cjs.entry.js +5 -5
- package/dist/cjs/hb-scrollbar.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-segmented.cjs.entry.js +13 -2
- package/dist/cjs/hb-segmented.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-select.cjs.entry.js +100 -19
- package/dist/cjs/hb-select.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-slider.cjs.entry.js +6 -12
- package/dist/cjs/hb-slider.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-space.cjs.entry.js +2 -2
- package/dist/cjs/hb-statistic.cjs.entry.js +1 -1
- package/dist/cjs/hb-step.cjs.entry.js +1 -1
- package/dist/cjs/hb-steps.cjs.entry.js +3 -3
- package/dist/cjs/hb-steps.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-sub-menu.cjs.entry.js +5 -5
- package/dist/cjs/hb-switch.cjs.entry.js +3 -3
- package/dist/cjs/hb-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-tab-pane.cjs.entry.js +1 -1
- package/dist/cjs/hb-table.cjs.entry.js +218 -41
- package/dist/cjs/hb-table.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-tabs.cjs.entry.js +31 -10
- package/dist/cjs/hb-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-tag.cjs.entry.js +3 -2
- package/dist/cjs/hb-tag.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-text.cjs.entry.js +2 -2
- package/dist/cjs/hb-time-picker.cjs.entry.js +14 -9
- package/dist/cjs/hb-time-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-time-select.cjs.entry.js +13 -4
- package/dist/cjs/hb-time-select.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-tooltip.cjs.entry.js +30 -10
- package/dist/cjs/hb-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-tree-select.cjs.entry.js +125 -10
- package/dist/cjs/hb-tree-select.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-tree.cjs.entry.js +145 -12
- package/dist/cjs/hb-tree.cjs.entry.js.map +1 -1
- package/dist/cjs/hb-watermark.cjs.entry.js +19 -11
- package/dist/cjs/hb-watermark.cjs.entry.js.map +1 -1
- package/dist/cjs/huibo-ui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/transition-59f1da0f.js +34 -0
- package/dist/cjs/transition-59f1da0f.js.map +1 -0
- package/dist/collection/components/Alert/Alert.js +2 -1
- package/dist/collection/components/Alert/Alert.js.map +1 -1
- package/dist/collection/components/Calendar/Calendar.js +2 -2
- package/dist/collection/components/Calendar/Calendar.js.map +1 -1
- package/dist/collection/components/Cascader/Cascader.js +47 -11
- package/dist/collection/components/Cascader/Cascader.js.map +1 -1
- package/dist/collection/components/Checkbox/Checkbox.js +9 -4
- package/dist/collection/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/collection/components/Checkbox/CheckboxGroup.js +12 -8
- package/dist/collection/components/Checkbox/CheckboxGroup.js.map +1 -1
- package/dist/collection/components/Collapse/Collapse.js +20 -15
- package/dist/collection/components/Collapse/Collapse.js.map +1 -1
- package/dist/collection/components/Collapse/CollapseItem.js +33 -4
- package/dist/collection/components/Collapse/CollapseItem.js.map +1 -1
- package/dist/collection/components/ColorPicker/ColorPicker.js +22 -19
- package/dist/collection/components/ColorPicker/ColorPicker.js.map +1 -1
- package/dist/collection/components/ColorPicker/color-picker.css +8 -3
- package/dist/collection/components/DatePicker/DatePicker.js +12 -9
- package/dist/collection/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/collection/components/DatePicker/date-picker.css +3 -2
- package/dist/collection/components/Descriptions/descriptions.css +30 -10
- package/dist/collection/components/Dialog/Dialog.js +54 -10
- package/dist/collection/components/Dialog/Dialog.js.map +1 -1
- package/dist/collection/components/Dialog/dialog.css +57 -11
- package/dist/collection/components/Drawer/Drawer.js +34 -3
- package/dist/collection/components/Drawer/Drawer.js.map +1 -1
- package/dist/collection/components/Drawer/drawer.css +207 -17
- package/dist/collection/components/Dropdown/Dropdown.js +28 -13
- package/dist/collection/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/collection/components/Dropdown/dropdown.css +24 -2
- package/dist/collection/components/Empty/Empty.js +1 -1
- package/dist/collection/components/FloatButton/FloatButton.js +2 -2
- package/dist/collection/components/Form/Form.js +217 -9
- package/dist/collection/components/Form/Form.js.map +1 -1
- package/dist/collection/components/Form/FormItem.js +126 -18
- package/dist/collection/components/Form/FormItem.js.map +1 -1
- package/dist/collection/components/Form/form-item.css +8 -2
- package/dist/collection/components/Image/Image.js +24 -3
- package/dist/collection/components/Image/Image.js.map +1 -1
- package/dist/collection/components/ImagePreview/ImagePreview.js +1 -1
- package/dist/collection/components/ImagePreview/ImagePreview.js.map +1 -1
- package/dist/collection/components/Input/Input.js +3 -2
- package/dist/collection/components/Input/Input.js.map +1 -1
- package/dist/collection/components/Input/input.css +1 -2
- package/dist/collection/components/InputNumber/InputNumber.js +6 -6
- package/dist/collection/components/InputNumber/InputNumber.js.map +1 -1
- package/dist/collection/components/InputNumber/input-number.css +11 -1
- package/dist/collection/components/InputTag/InputTag.js +2 -2
- package/dist/collection/components/Layout/Layout.js.map +1 -1
- package/dist/collection/components/Layout/Row.js +2 -2
- package/dist/collection/components/Layout/layout.css +1713 -576
- package/dist/collection/components/Link/Link.js +2 -2
- package/dist/collection/components/Loading/Loading.js +2 -2
- package/dist/collection/components/Menu/Menu.js +2 -2
- package/dist/collection/components/Menu/MenuItem.js +34 -5
- package/dist/collection/components/Menu/MenuItem.js.map +1 -1
- package/dist/collection/components/Menu/SubMenu.js +4 -4
- package/dist/collection/components/Message/Message.js +13 -4
- package/dist/collection/components/Message/Message.js.map +1 -1
- package/dist/collection/components/PageHeader/PageHeader.js +1 -1
- package/dist/collection/components/Pagination/Pagination.js +8 -5
- package/dist/collection/components/Pagination/Pagination.js.map +1 -1
- package/dist/collection/components/Popconfirm/Popconfirm.js +28 -6
- package/dist/collection/components/Popconfirm/Popconfirm.js.map +1 -1
- package/dist/collection/components/Popconfirm/popconfirm.css +80 -16
- package/dist/collection/components/Popover/Popover.js +27 -12
- package/dist/collection/components/Popover/Popover.js.map +1 -1
- package/dist/collection/components/Popover/popover.css +49 -8
- package/dist/collection/components/Progress/Progress.js +1 -1
- package/dist/collection/components/Radio/Radio.js +8 -3
- package/dist/collection/components/Radio/Radio.js.map +1 -1
- package/dist/collection/components/Rate/Rate.js +3 -3
- package/dist/collection/components/Rate/Rate.js.map +1 -1
- package/dist/collection/components/Scrollbar/Scrollbar.js +5 -5
- package/dist/collection/components/Scrollbar/Scrollbar.js.map +1 -1
- package/dist/collection/components/Segmented/Segmented.js +15 -1
- package/dist/collection/components/Segmented/Segmented.js.map +1 -1
- package/dist/collection/components/Select/Select.js +123 -19
- package/dist/collection/components/Select/Select.js.map +1 -1
- package/dist/collection/components/Select/select.css +0 -1
- package/dist/collection/components/Slider/Slider.js +6 -12
- package/dist/collection/components/Slider/Slider.js.map +1 -1
- package/dist/collection/components/Slider/slider.css +0 -1
- package/dist/collection/components/Space/Space.js +2 -2
- package/dist/collection/components/Statistic/Statistic.js +1 -1
- package/dist/collection/components/Steps/Step.js +1 -1
- package/dist/collection/components/Steps/Steps.js +2 -2
- package/dist/collection/components/Steps/Steps.js.map +1 -1
- package/dist/collection/components/Switch/Switch.js +3 -3
- package/dist/collection/components/Switch/Switch.js.map +1 -1
- package/dist/collection/components/Switch/switch.css +3 -2
- package/dist/collection/components/Table/Table.js +296 -41
- package/dist/collection/components/Table/Table.js.map +1 -1
- package/dist/collection/components/Table/table.css +6 -2
- package/dist/collection/components/Tabs/TabPane.js +1 -1
- package/dist/collection/components/Tabs/Tabs.js +31 -10
- package/dist/collection/components/Tabs/Tabs.js.map +1 -1
- package/dist/collection/components/Tag/Tag.js +3 -2
- package/dist/collection/components/Tag/Tag.js.map +1 -1
- package/dist/collection/components/Text/Text.js +2 -2
- package/dist/collection/components/TimePicker/TimePicker.js +14 -9
- package/dist/collection/components/TimePicker/TimePicker.js.map +1 -1
- package/dist/collection/components/TimeSelect/TimeSelect.js +13 -4
- package/dist/collection/components/TimeSelect/TimeSelect.js.map +1 -1
- package/dist/collection/components/Tooltip/Tooltip.js +31 -8
- package/dist/collection/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/collection/components/Tooltip/tooltip.css +24 -2
- package/dist/collection/components/Tree/Tree.js +147 -13
- package/dist/collection/components/Tree/Tree.js.map +1 -1
- package/dist/collection/components/TreeSelect/TreeSelect.js +130 -11
- package/dist/collection/components/TreeSelect/TreeSelect.js.map +1 -1
- package/dist/collection/components/Watermark/Watermark.js +19 -11
- package/dist/collection/components/Watermark/Watermark.js.map +1 -1
- package/dist/collection/utils/a11y.js +15 -1
- package/dist/collection/utils/a11y.js.map +1 -1
- package/dist/collection/utils/date-helpers.js +4 -15
- package/dist/collection/utils/date-helpers.js.map +1 -1
- package/dist/collection/utils/transition.js +29 -0
- package/dist/collection/utils/transition.js.map +1 -0
- package/dist/collection/utils/virtual-scroll.js +39 -0
- package/dist/collection/utils/virtual-scroll.js.map +1 -0
- package/dist/components/hb-alert.js +2 -1
- package/dist/components/hb-alert.js.map +1 -1
- package/dist/components/hb-calendar.js +2 -2
- package/dist/components/hb-calendar.js.map +1 -1
- package/dist/components/hb-cascader.js +48 -12
- package/dist/components/hb-cascader.js.map +1 -1
- package/dist/components/hb-checkbox-group.js +12 -8
- package/dist/components/hb-checkbox-group.js.map +1 -1
- package/dist/components/hb-checkbox.js +9 -4
- package/dist/components/hb-checkbox.js.map +1 -1
- package/dist/components/hb-collapse-item.js +14 -4
- package/dist/components/hb-collapse-item.js.map +1 -1
- package/dist/components/hb-collapse.js +20 -15
- package/dist/components/hb-collapse.js.map +1 -1
- package/dist/components/hb-color-picker.js +22 -19
- package/dist/components/hb-color-picker.js.map +1 -1
- package/dist/components/hb-date-picker-pane.js +1 -1
- package/dist/components/hb-date-picker.js +13 -10
- package/dist/components/hb-date-picker.js.map +1 -1
- package/dist/components/hb-date-range-picker.js +1 -1
- package/dist/components/hb-date-time-picker.js +1 -1
- package/dist/components/hb-descriptions.js.map +1 -1
- package/dist/components/hb-dialog.js +53 -13
- package/dist/components/hb-dialog.js.map +1 -1
- package/dist/components/hb-drawer.js +36 -5
- package/dist/components/hb-drawer.js.map +1 -1
- package/dist/components/hb-dropdown.js +28 -15
- package/dist/components/hb-dropdown.js.map +1 -1
- package/dist/components/hb-empty.js +1 -1
- package/dist/components/hb-float-button.js +2 -2
- package/dist/components/hb-form-item.js +70 -16
- package/dist/components/hb-form-item.js.map +1 -1
- package/dist/components/hb-form.js +120 -7
- package/dist/components/hb-form.js.map +1 -1
- package/dist/components/hb-image-preview.js +1 -1
- package/dist/components/hb-image-preview.js.map +1 -1
- package/dist/components/hb-image.js +23 -3
- package/dist/components/hb-image.js.map +1 -1
- package/dist/components/hb-input-number.js +7 -7
- package/dist/components/hb-input-number.js.map +1 -1
- package/dist/components/hb-input-tag.js +2 -2
- package/dist/components/hb-input.js +3 -2
- package/dist/components/hb-input.js.map +1 -1
- package/dist/components/hb-layout.js.map +1 -1
- package/dist/components/hb-link.js +2 -2
- package/dist/components/hb-loading.js +2 -2
- package/dist/components/hb-menu-item.js +15 -5
- package/dist/components/hb-menu-item.js.map +1 -1
- package/dist/components/hb-menu.js +2 -2
- package/dist/components/hb-message.js +13 -4
- package/dist/components/hb-message.js.map +1 -1
- package/dist/components/hb-page-header.js +1 -1
- package/dist/components/hb-pagination.js +8 -5
- package/dist/components/hb-pagination.js.map +1 -1
- package/dist/components/hb-popconfirm.js +28 -8
- package/dist/components/hb-popconfirm.js.map +1 -1
- package/dist/components/hb-popover.js +27 -14
- package/dist/components/hb-popover.js.map +1 -1
- package/dist/components/hb-progress.js +1 -1
- package/dist/components/hb-radio.js +8 -3
- package/dist/components/hb-radio.js.map +1 -1
- package/dist/components/hb-rate.js +3 -3
- package/dist/components/hb-rate.js.map +1 -1
- package/dist/components/hb-row.js +2 -2
- package/dist/components/hb-scrollbar.js +5 -5
- package/dist/components/hb-scrollbar.js.map +1 -1
- package/dist/components/hb-segmented.js +15 -2
- package/dist/components/hb-segmented.js.map +1 -1
- package/dist/components/hb-select.js +105 -20
- package/dist/components/hb-select.js.map +1 -1
- package/dist/components/hb-slider.js +6 -12
- package/dist/components/hb-slider.js.map +1 -1
- package/dist/components/hb-space.js +2 -2
- package/dist/components/hb-statistic.js +1 -1
- package/dist/components/hb-step.js +1 -1
- package/dist/components/hb-steps.js +3 -3
- package/dist/components/hb-steps.js.map +1 -1
- package/dist/components/hb-sub-menu.js +5 -5
- package/dist/components/hb-switch.js +3 -3
- package/dist/components/hb-switch.js.map +1 -1
- package/dist/components/hb-tab-pane.js +1 -1
- package/dist/components/hb-table.js +226 -43
- package/dist/components/hb-table.js.map +1 -1
- package/dist/components/hb-tabs.js +31 -10
- package/dist/components/hb-tabs.js.map +1 -1
- package/dist/components/hb-tag.js +3 -2
- package/dist/components/hb-tag.js.map +1 -1
- package/dist/components/hb-text.js +2 -2
- package/dist/components/hb-time-picker.js +14 -9
- package/dist/components/hb-time-picker.js.map +1 -1
- package/dist/components/hb-time-select.js +13 -4
- package/dist/components/hb-time-select.js.map +1 -1
- package/dist/components/hb-tooltip.js +31 -10
- package/dist/components/hb-tooltip.js.map +1 -1
- package/dist/components/hb-tree-select.js +129 -11
- package/dist/components/hb-tree-select.js.map +1 -1
- package/dist/components/hb-tree.js +147 -13
- package/dist/components/hb-tree.js.map +1 -1
- package/dist/components/hb-watermark.js +19 -11
- package/dist/components/hb-watermark.js.map +1 -1
- package/dist/{esm/a11y-f9ab2964.js → components/p-00aa34c8.js} +17 -3
- package/dist/components/p-00aa34c8.js.map +1 -0
- package/dist/components/{p-08b4005c.js → p-e0876aca.js} +5 -16
- package/dist/components/p-e0876aca.js.map +1 -0
- package/dist/components/p-fad66d69.js +32 -0
- package/dist/components/p-fad66d69.js.map +1 -0
- package/dist/{components/p-cc0aeb50.js → esm/a11y-e4cde5b0.js} +17 -3
- package/dist/esm/a11y-e4cde5b0.js.map +1 -0
- package/dist/esm/{date-helpers-44507189.js → date-helpers-259ed2f1.js} +5 -16
- package/dist/esm/date-helpers-259ed2f1.js.map +1 -0
- package/dist/esm/hb-alert.entry.js +2 -1
- package/dist/esm/hb-alert.entry.js.map +1 -1
- package/dist/esm/hb-calendar.entry.js +2 -2
- package/dist/esm/hb-calendar.entry.js.map +1 -1
- package/dist/esm/hb-cascader.entry.js +48 -12
- package/dist/esm/hb-cascader.entry.js.map +1 -1
- package/dist/esm/hb-checkbox-group.entry.js +12 -8
- package/dist/esm/hb-checkbox-group.entry.js.map +1 -1
- package/dist/esm/hb-checkbox.entry.js +9 -4
- package/dist/esm/hb-checkbox.entry.js.map +1 -1
- package/dist/esm/hb-collapse-item.entry.js +13 -4
- package/dist/esm/hb-collapse-item.entry.js.map +1 -1
- package/dist/esm/hb-collapse.entry.js +20 -15
- package/dist/esm/hb-collapse.entry.js.map +1 -1
- package/dist/esm/hb-color-picker.entry.js +22 -19
- package/dist/esm/hb-color-picker.entry.js.map +1 -1
- package/dist/esm/hb-date-picker-pane.entry.js +1 -1
- package/dist/esm/hb-date-picker.entry.js +13 -10
- package/dist/esm/hb-date-picker.entry.js.map +1 -1
- package/dist/esm/hb-date-range-picker.entry.js +1 -1
- package/dist/esm/hb-date-time-picker.entry.js +1 -1
- package/dist/esm/hb-descriptions.entry.js.map +1 -1
- package/dist/esm/hb-dialog.entry.js +51 -12
- package/dist/esm/hb-dialog.entry.js.map +1 -1
- package/dist/esm/hb-drawer.entry.js +34 -4
- package/dist/esm/hb-drawer.entry.js.map +1 -1
- package/dist/esm/hb-dropdown.entry.js +27 -15
- package/dist/esm/hb-dropdown.entry.js.map +1 -1
- package/dist/esm/hb-empty.entry.js +1 -1
- package/dist/esm/hb-float-button.entry.js +2 -2
- package/dist/esm/hb-form-item.entry.js +67 -16
- package/dist/esm/hb-form-item.entry.js.map +1 -1
- package/dist/esm/hb-form.entry.js +115 -7
- package/dist/esm/hb-form.entry.js.map +1 -1
- package/dist/esm/hb-image-preview.entry.js +1 -1
- package/dist/esm/hb-image-preview.entry.js.map +1 -1
- package/dist/esm/hb-image.entry.js +21 -3
- package/dist/esm/hb-image.entry.js.map +1 -1
- package/dist/esm/hb-input-number.entry.js +7 -7
- package/dist/esm/hb-input-number.entry.js.map +1 -1
- package/dist/esm/hb-input-tag.entry.js +2 -2
- package/dist/esm/hb-input.entry.js +3 -2
- package/dist/esm/hb-input.entry.js.map +1 -1
- package/dist/esm/hb-layout.entry.js.map +1 -1
- package/dist/esm/hb-link.entry.js +2 -2
- package/dist/esm/hb-loading.entry.js +2 -2
- package/dist/esm/hb-menu-item.entry.js +14 -5
- package/dist/esm/hb-menu-item.entry.js.map +1 -1
- package/dist/esm/hb-menu.entry.js +2 -2
- package/dist/esm/hb-message.entry.js +13 -4
- package/dist/esm/hb-message.entry.js.map +1 -1
- package/dist/esm/hb-page-header.entry.js +1 -1
- package/dist/esm/hb-pagination.entry.js +8 -5
- package/dist/esm/hb-pagination.entry.js.map +1 -1
- package/dist/esm/hb-popconfirm.entry.js +27 -8
- package/dist/esm/hb-popconfirm.entry.js.map +1 -1
- package/dist/esm/hb-popover.entry.js +26 -14
- package/dist/esm/hb-popover.entry.js.map +1 -1
- package/dist/esm/hb-progress.entry.js +1 -1
- package/dist/esm/hb-radio.entry.js +8 -3
- package/dist/esm/hb-radio.entry.js.map +1 -1
- package/dist/esm/hb-rate.entry.js +3 -3
- package/dist/esm/hb-rate.entry.js.map +1 -1
- package/dist/esm/hb-row.entry.js +2 -2
- package/dist/esm/hb-scrollbar.entry.js +5 -5
- package/dist/esm/hb-scrollbar.entry.js.map +1 -1
- package/dist/esm/hb-segmented.entry.js +13 -2
- package/dist/esm/hb-segmented.entry.js.map +1 -1
- package/dist/esm/hb-select.entry.js +100 -19
- package/dist/esm/hb-select.entry.js.map +1 -1
- package/dist/esm/hb-slider.entry.js +6 -12
- package/dist/esm/hb-slider.entry.js.map +1 -1
- package/dist/esm/hb-space.entry.js +2 -2
- package/dist/esm/hb-statistic.entry.js +1 -1
- package/dist/esm/hb-step.entry.js +1 -1
- package/dist/esm/hb-steps.entry.js +3 -3
- package/dist/esm/hb-steps.entry.js.map +1 -1
- package/dist/esm/hb-sub-menu.entry.js +5 -5
- package/dist/esm/hb-switch.entry.js +3 -3
- package/dist/esm/hb-switch.entry.js.map +1 -1
- package/dist/esm/hb-tab-pane.entry.js +1 -1
- package/dist/esm/hb-table.entry.js +218 -41
- package/dist/esm/hb-table.entry.js.map +1 -1
- package/dist/esm/hb-tabs.entry.js +31 -10
- package/dist/esm/hb-tabs.entry.js.map +1 -1
- package/dist/esm/hb-tag.entry.js +3 -2
- package/dist/esm/hb-tag.entry.js.map +1 -1
- package/dist/esm/hb-text.entry.js +2 -2
- package/dist/esm/hb-time-picker.entry.js +14 -9
- package/dist/esm/hb-time-picker.entry.js.map +1 -1
- package/dist/esm/hb-time-select.entry.js +13 -4
- package/dist/esm/hb-time-select.entry.js.map +1 -1
- package/dist/esm/hb-tooltip.entry.js +30 -10
- package/dist/esm/hb-tooltip.entry.js.map +1 -1
- package/dist/esm/hb-tree-select.entry.js +125 -10
- package/dist/esm/hb-tree-select.entry.js.map +1 -1
- package/dist/esm/hb-tree.entry.js +145 -12
- package/dist/esm/hb-tree.entry.js.map +1 -1
- package/dist/esm/hb-watermark.entry.js +19 -11
- package/dist/esm/hb-watermark.entry.js.map +1 -1
- package/dist/esm/huibo-ui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/transition-4295d789.js +32 -0
- package/dist/esm/transition-4295d789.js.map +1 -0
- package/dist/huibo-ui/huibo-ui.esm.js +1 -1
- package/dist/huibo-ui/huibo-ui.esm.js.map +1 -1
- package/dist/huibo-ui/p-00aa34c8.js +2 -0
- package/dist/huibo-ui/p-00aa34c8.js.map +1 -0
- package/dist/huibo-ui/p-0cc1e3f3.entry.js +2 -0
- package/dist/huibo-ui/p-0cc1e3f3.entry.js.map +1 -0
- package/dist/huibo-ui/{p-678b4212.entry.js → p-0ddae4e9.entry.js} +2 -2
- package/dist/huibo-ui/p-10f6c184.entry.js.map +1 -1
- package/dist/huibo-ui/{p-f4336be9.entry.js → p-14c3b47b.entry.js} +2 -2
- package/dist/huibo-ui/{p-c50ad398.entry.js → p-193efdc0.entry.js} +2 -2
- package/dist/huibo-ui/{p-735bceef.entry.js → p-1b98152b.entry.js} +2 -2
- package/dist/huibo-ui/p-1b98152b.entry.js.map +1 -0
- package/dist/huibo-ui/p-1f6d0adb.entry.js +2 -0
- package/dist/huibo-ui/p-1f6d0adb.entry.js.map +1 -0
- package/dist/huibo-ui/{p-0d4b2997.entry.js → p-2bcda1bb.entry.js} +2 -2
- package/dist/huibo-ui/{p-b8d87f7e.entry.js → p-2ca9796a.entry.js} +2 -2
- package/dist/huibo-ui/p-2ca9796a.entry.js.map +1 -0
- package/dist/huibo-ui/{p-c80f8ace.entry.js → p-2cf5bf20.entry.js} +2 -2
- package/dist/huibo-ui/p-2cf5bf20.entry.js.map +1 -0
- package/dist/huibo-ui/{p-7da14d7c.entry.js → p-3042f986.entry.js} +2 -2
- package/dist/huibo-ui/{p-e039155d.entry.js → p-3dacb26b.entry.js} +2 -2
- package/dist/huibo-ui/{p-a084b8e5.entry.js → p-412ff618.entry.js} +2 -2
- package/dist/huibo-ui/p-4148d875.entry.js +2 -0
- package/dist/huibo-ui/p-4148d875.entry.js.map +1 -0
- package/dist/huibo-ui/{p-6beb5b81.entry.js → p-415295f3.entry.js} +2 -2
- package/dist/huibo-ui/p-415295f3.entry.js.map +1 -0
- package/dist/huibo-ui/p-494e6c25.entry.js +2 -0
- package/dist/huibo-ui/p-494e6c25.entry.js.map +1 -0
- package/dist/huibo-ui/p-4d87d7f4.entry.js +2 -0
- package/dist/huibo-ui/p-4d87d7f4.entry.js.map +1 -0
- package/dist/huibo-ui/p-5e253c15.entry.js +2 -0
- package/dist/huibo-ui/p-5e253c15.entry.js.map +1 -0
- package/dist/huibo-ui/p-63d68c61.entry.js +2 -0
- package/dist/huibo-ui/p-63d68c61.entry.js.map +1 -0
- package/dist/huibo-ui/{p-ccd09d5a.entry.js → p-6518c435.entry.js} +2 -2
- package/dist/huibo-ui/{p-1f8db37a.entry.js → p-687d8dff.entry.js} +2 -2
- package/dist/huibo-ui/p-687d8dff.entry.js.map +1 -0
- package/dist/huibo-ui/p-688460ce.entry.js +2 -0
- package/dist/huibo-ui/p-688460ce.entry.js.map +1 -0
- package/dist/huibo-ui/p-69bb1dd9.entry.js +2 -0
- package/dist/huibo-ui/p-69bb1dd9.entry.js.map +1 -0
- package/dist/huibo-ui/{p-2811e603.entry.js → p-6bfe1954.entry.js} +2 -2
- package/dist/huibo-ui/p-6bfe1954.entry.js.map +1 -0
- package/dist/huibo-ui/{p-e5cbfa9e.entry.js → p-6c23fbd1.entry.js} +2 -2
- package/dist/huibo-ui/p-6c23fbd1.entry.js.map +1 -0
- package/dist/huibo-ui/p-6c8cf248.entry.js.map +1 -1
- package/dist/huibo-ui/p-6efed295.entry.js +2 -0
- package/dist/huibo-ui/p-6efed295.entry.js.map +1 -0
- package/dist/huibo-ui/p-7a38b3e2.entry.js +2 -0
- package/dist/huibo-ui/p-7a38b3e2.entry.js.map +1 -0
- package/dist/huibo-ui/{p-cad57c2d.entry.js → p-7a682c56.entry.js} +2 -2
- package/dist/huibo-ui/{p-a8996d22.entry.js → p-815fc943.entry.js} +2 -2
- package/dist/huibo-ui/{p-af74667d.entry.js → p-89be7973.entry.js} +2 -2
- package/dist/huibo-ui/p-8a202bc5.entry.js.map +1 -1
- package/dist/huibo-ui/{p-213b9de7.entry.js → p-8c4415ed.entry.js} +2 -2
- package/dist/huibo-ui/p-8c4415ed.entry.js.map +1 -0
- package/dist/huibo-ui/{p-8fdbd17c.entry.js → p-950e7465.entry.js} +2 -2
- package/dist/huibo-ui/{p-ab9cf0e4.entry.js → p-96cecd21.entry.js} +2 -2
- package/dist/huibo-ui/p-96cecd21.entry.js.map +1 -0
- package/dist/huibo-ui/{p-2b4556ff.entry.js → p-98b513cd.entry.js} +2 -2
- package/dist/huibo-ui/p-98b513cd.entry.js.map +1 -0
- package/dist/huibo-ui/{p-89ea1141.entry.js → p-ac45291c.entry.js} +2 -2
- package/dist/huibo-ui/{p-e10fcfbe.entry.js → p-b105cf76.entry.js} +2 -2
- package/dist/huibo-ui/p-b105cf76.entry.js.map +1 -0
- package/dist/huibo-ui/{p-9a5406f0.entry.js → p-b38802b0.entry.js} +2 -2
- package/dist/huibo-ui/{p-9a5406f0.entry.js.map → p-b38802b0.entry.js.map} +1 -1
- package/dist/huibo-ui/{p-ea74fcae.entry.js → p-b3fd12c7.entry.js} +2 -2
- package/dist/huibo-ui/p-b3fd12c7.entry.js.map +1 -0
- package/dist/huibo-ui/p-b5ea18ba.entry.js +2 -0
- package/dist/huibo-ui/p-b5ea18ba.entry.js.map +1 -0
- package/dist/huibo-ui/{p-41d9c846.entry.js → p-b6afe81e.entry.js} +2 -2
- package/dist/huibo-ui/p-b7900dee.entry.js +2 -0
- package/dist/huibo-ui/p-b7900dee.entry.js.map +1 -0
- package/dist/huibo-ui/p-b8c83751.entry.js +2 -0
- package/dist/huibo-ui/p-b8c83751.entry.js.map +1 -0
- package/dist/huibo-ui/p-c7713947.entry.js +2 -0
- package/dist/huibo-ui/p-c7713947.entry.js.map +1 -0
- package/dist/huibo-ui/{p-33de6878.entry.js → p-c869842c.entry.js} +2 -2
- package/dist/huibo-ui/p-c869842c.entry.js.map +1 -0
- package/dist/huibo-ui/p-c8e917db.entry.js.map +1 -1
- package/dist/huibo-ui/p-cb66dbef.entry.js +2 -0
- package/dist/huibo-ui/p-cb66dbef.entry.js.map +1 -0
- package/dist/huibo-ui/p-cde83f76.entry.js +2 -0
- package/dist/huibo-ui/p-cde83f76.entry.js.map +1 -0
- package/dist/huibo-ui/{p-f5969181.entry.js → p-dd9c6459.entry.js} +2 -2
- package/dist/huibo-ui/{p-08b4005c.js → p-e0876aca.js} +1 -1
- package/dist/huibo-ui/p-e0876aca.js.map +1 -0
- package/dist/huibo-ui/{p-aa5e5e02.entry.js → p-e1773c93.entry.js} +2 -2
- package/dist/huibo-ui/p-e1773c93.entry.js.map +1 -0
- package/dist/huibo-ui/{p-626b48f1.entry.js → p-e73c357f.entry.js} +2 -2
- package/dist/huibo-ui/p-e73c357f.entry.js.map +1 -0
- package/dist/huibo-ui/{p-60532a1f.entry.js → p-e7c73624.entry.js} +2 -2
- package/dist/huibo-ui/p-e7c73624.entry.js.map +1 -0
- package/dist/huibo-ui/{p-86bdc48a.entry.js → p-e8824b2c.entry.js} +2 -2
- package/dist/huibo-ui/p-e8824b2c.entry.js.map +1 -0
- package/dist/huibo-ui/{p-13010da2.entry.js → p-e9e7abca.entry.js} +2 -2
- package/dist/huibo-ui/{p-f6889710.entry.js → p-ea0823f3.entry.js} +2 -2
- package/dist/huibo-ui/p-ea0823f3.entry.js.map +1 -0
- package/dist/huibo-ui/{p-b468858e.entry.js → p-f1f2483f.entry.js} +2 -2
- package/dist/huibo-ui/p-f69599fa.entry.js +2 -0
- package/dist/huibo-ui/p-f69599fa.entry.js.map +1 -0
- package/dist/huibo-ui/p-fad66d69.js +2 -0
- package/dist/huibo-ui/p-fad66d69.js.map +1 -0
- package/dist/huibo-ui/{p-fd8301c6.entry.js → p-fd6831f9.entry.js} +2 -2
- package/dist/huibo-ui/p-ff6bc5cc.entry.js +2 -0
- package/dist/huibo-ui/p-ff6bc5cc.entry.js.map +1 -0
- package/dist/types/components/Cascader/Cascader.d.ts +12 -0
- package/dist/types/components/Checkbox/Checkbox.d.ts +5 -0
- package/dist/types/components/Checkbox/CheckboxGroup.d.ts +1 -0
- package/dist/types/components/Collapse/Collapse.d.ts +2 -0
- package/dist/types/components/Collapse/CollapseItem.d.ts +8 -1
- package/dist/types/components/Dialog/Dialog.d.ts +13 -1
- package/dist/types/components/Drawer/Drawer.d.ts +4 -0
- package/dist/types/components/Dropdown/Dropdown.d.ts +6 -2
- package/dist/types/components/Form/Form.d.ts +59 -0
- package/dist/types/components/Form/FormItem.d.ts +23 -0
- package/dist/types/components/Image/Image.d.ts +6 -0
- package/dist/types/components/Menu/MenuItem.d.ts +8 -1
- package/dist/types/components/Message/Message.d.ts +3 -0
- package/dist/types/components/Popconfirm/Popconfirm.d.ts +6 -2
- package/dist/types/components/Popover/Popover.d.ts +6 -1
- package/dist/types/components/Radio/Radio.d.ts +5 -0
- package/dist/types/components/Segmented/Segmented.d.ts +6 -0
- package/dist/types/components/Select/Select.d.ts +24 -0
- package/dist/types/components/Table/Table.d.ts +110 -9
- package/dist/types/components/Tabs/Tabs.d.ts +6 -0
- package/dist/types/components/Tooltip/Tooltip.d.ts +6 -0
- package/dist/types/components/Tree/Tree.d.ts +24 -0
- package/dist/types/components/TreeSelect/TreeSelect.d.ts +17 -0
- package/dist/types/components/Watermark/Watermark.d.ts +7 -1
- package/dist/types/components.d.ts +188 -6
- package/dist/types/utils/a11y.d.ts +9 -0
- package/dist/types/utils/transition.d.ts +27 -0
- package/dist/types/utils/virtual-scroll.d.ts +38 -0
- package/package.json +1 -1
- package/dist/cjs/a11y-802de67a.js.map +0 -1
- package/dist/cjs/date-helpers-1ffddc59.js.map +0 -1
- package/dist/components/p-08b4005c.js.map +0 -1
- package/dist/components/p-cc0aeb50.js.map +0 -1
- package/dist/esm/a11y-f9ab2964.js.map +0 -1
- package/dist/esm/date-helpers-44507189.js.map +0 -1
- package/dist/huibo-ui/p-08b4005c.js.map +0 -1
- package/dist/huibo-ui/p-1f8db37a.entry.js.map +0 -1
- package/dist/huibo-ui/p-213b9de7.entry.js.map +0 -1
- package/dist/huibo-ui/p-25fd7d5c.entry.js +0 -2
- package/dist/huibo-ui/p-25fd7d5c.entry.js.map +0 -1
- package/dist/huibo-ui/p-2811e603.entry.js.map +0 -1
- package/dist/huibo-ui/p-2943f5d0.entry.js +0 -2
- package/dist/huibo-ui/p-2943f5d0.entry.js.map +0 -1
- package/dist/huibo-ui/p-2b4556ff.entry.js.map +0 -1
- package/dist/huibo-ui/p-33de6878.entry.js.map +0 -1
- package/dist/huibo-ui/p-3807da71.entry.js +0 -2
- package/dist/huibo-ui/p-3807da71.entry.js.map +0 -1
- package/dist/huibo-ui/p-47ef7a86.entry.js +0 -2
- package/dist/huibo-ui/p-47ef7a86.entry.js.map +0 -1
- package/dist/huibo-ui/p-4d34e43e.entry.js +0 -2
- package/dist/huibo-ui/p-4d34e43e.entry.js.map +0 -1
- package/dist/huibo-ui/p-54aa2fd8.entry.js +0 -2
- package/dist/huibo-ui/p-54aa2fd8.entry.js.map +0 -1
- package/dist/huibo-ui/p-60532a1f.entry.js.map +0 -1
- package/dist/huibo-ui/p-626b48f1.entry.js.map +0 -1
- package/dist/huibo-ui/p-639f167d.entry.js +0 -2
- package/dist/huibo-ui/p-639f167d.entry.js.map +0 -1
- package/dist/huibo-ui/p-6beb5b81.entry.js.map +0 -1
- package/dist/huibo-ui/p-735bceef.entry.js.map +0 -1
- package/dist/huibo-ui/p-76519752.entry.js +0 -2
- package/dist/huibo-ui/p-76519752.entry.js.map +0 -1
- package/dist/huibo-ui/p-79af2efa.entry.js +0 -2
- package/dist/huibo-ui/p-79af2efa.entry.js.map +0 -1
- package/dist/huibo-ui/p-7f6975ad.entry.js +0 -2
- package/dist/huibo-ui/p-7f6975ad.entry.js.map +0 -1
- package/dist/huibo-ui/p-86bdc48a.entry.js.map +0 -1
- package/dist/huibo-ui/p-8a8443b8.entry.js +0 -2
- package/dist/huibo-ui/p-8a8443b8.entry.js.map +0 -1
- package/dist/huibo-ui/p-8fd788c9.entry.js +0 -2
- package/dist/huibo-ui/p-8fd788c9.entry.js.map +0 -1
- package/dist/huibo-ui/p-92521c31.entry.js +0 -2
- package/dist/huibo-ui/p-92521c31.entry.js.map +0 -1
- package/dist/huibo-ui/p-965d4d02.entry.js +0 -2
- package/dist/huibo-ui/p-965d4d02.entry.js.map +0 -1
- package/dist/huibo-ui/p-aa5e5e02.entry.js.map +0 -1
- package/dist/huibo-ui/p-ab9cf0e4.entry.js.map +0 -1
- package/dist/huibo-ui/p-b8d87f7e.entry.js.map +0 -1
- package/dist/huibo-ui/p-c6c91664.entry.js +0 -2
- package/dist/huibo-ui/p-c6c91664.entry.js.map +0 -1
- package/dist/huibo-ui/p-c80f8ace.entry.js.map +0 -1
- package/dist/huibo-ui/p-cc0aeb50.js +0 -2
- package/dist/huibo-ui/p-cc0aeb50.js.map +0 -1
- package/dist/huibo-ui/p-d79a15b1.entry.js +0 -2
- package/dist/huibo-ui/p-d79a15b1.entry.js.map +0 -1
- package/dist/huibo-ui/p-e10fcfbe.entry.js.map +0 -1
- package/dist/huibo-ui/p-e5cbfa9e.entry.js.map +0 -1
- package/dist/huibo-ui/p-ea74fcae.entry.js.map +0 -1
- package/dist/huibo-ui/p-edbda423.entry.js +0 -2
- package/dist/huibo-ui/p-edbda423.entry.js.map +0 -1
- package/dist/huibo-ui/p-f6889710.entry.js.map +0 -1
- package/dist/huibo-ui/p-f9bb5217.entry.js +0 -2
- package/dist/huibo-ui/p-f9bb5217.entry.js.map +0 -1
- package/dist/huibo-ui/p-fea20295.entry.js +0 -2
- package/dist/huibo-ui/p-fea20295.entry.js.map +0 -1
- /package/dist/huibo-ui/{p-678b4212.entry.js.map → p-0ddae4e9.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-f4336be9.entry.js.map → p-14c3b47b.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-c50ad398.entry.js.map → p-193efdc0.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-0d4b2997.entry.js.map → p-2bcda1bb.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-7da14d7c.entry.js.map → p-3042f986.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-e039155d.entry.js.map → p-3dacb26b.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-a084b8e5.entry.js.map → p-412ff618.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-ccd09d5a.entry.js.map → p-6518c435.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-cad57c2d.entry.js.map → p-7a682c56.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-a8996d22.entry.js.map → p-815fc943.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-af74667d.entry.js.map → p-89be7973.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-8fdbd17c.entry.js.map → p-950e7465.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-89ea1141.entry.js.map → p-ac45291c.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-41d9c846.entry.js.map → p-b6afe81e.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-f5969181.entry.js.map → p-dd9c6459.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-13010da2.entry.js.map → p-e9e7abca.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-b468858e.entry.js.map → p-f1f2483f.entry.js.map} +0 -0
- /package/dist/huibo-ui/{p-fd8301c6.entry.js.map → p-fd6831f9.entry.js.map} +0 -0
|
@@ -11,10 +11,25 @@ export class Image {
|
|
|
11
11
|
loaded = false;
|
|
12
12
|
error = false;
|
|
13
13
|
previewVisible = false;
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
/**
|
|
15
|
+
* 换 src 时重置 loaded/error。
|
|
16
|
+
* 修复 B5——修复前换 src 不清状态:坏图换好图卡在错误占位(error 不清零),
|
|
17
|
+
* 好图换坏图 loaded 仍 true 造成短暂状态错乱。
|
|
18
|
+
*/
|
|
19
|
+
handleSrcChange() {
|
|
20
|
+
this.loaded = false;
|
|
21
|
+
this.error = false;
|
|
22
|
+
}
|
|
23
|
+
handleLoad = () => {
|
|
24
|
+
this.loaded = true;
|
|
25
|
+
};
|
|
26
|
+
handleError = () => {
|
|
27
|
+
this.error = true;
|
|
28
|
+
};
|
|
16
29
|
render() {
|
|
17
|
-
return (h("div", { key: '
|
|
30
|
+
return (h("div", { key: 'c9bbb745e78918ca3659138a91e7472911ac4c09', class: "hb-image", style: { width: this.width, height: this.height, borderRadius: this.radius } }, !this.error ? (h("img", { src: this.src, alt: this.alt, class: { 'hb-image__inner': true, 'hb-image__inner--loaded': this.loaded }, style: { objectFit: this.fit }, loading: this.lazy ? 'lazy' : undefined, onLoad: this.handleLoad, onError: this.handleError, onClick: () => this.preview && (this.previewVisible = true) })) : (h("div", { class: "hb-image__error" }, "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25")), this.previewVisible && (h("div", { key: '7d3b00d09c919169eab62ab6f525b2ef2f038a4c', class: "hb-image__preview", onClick: () => {
|
|
31
|
+
this.previewVisible = false;
|
|
32
|
+
} }, h("img", { key: '7c05ea33e51493d3a297f0e1c7d3511efae46a6c', src: this.src, alt: this.alt, class: "hb-image__preview-img" })))));
|
|
18
33
|
}
|
|
19
34
|
static get is() { return "hb-image"; }
|
|
20
35
|
static get encapsulation() { return "shadow"; }
|
|
@@ -196,5 +211,11 @@ export class Image {
|
|
|
196
211
|
"previewVisible": {}
|
|
197
212
|
};
|
|
198
213
|
}
|
|
214
|
+
static get watchers() {
|
|
215
|
+
return [{
|
|
216
|
+
"propName": "src",
|
|
217
|
+
"methodName": "handleSrcChange"
|
|
218
|
+
}];
|
|
219
|
+
}
|
|
199
220
|
}
|
|
200
221
|
//# sourceMappingURL=Image.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGjE,MAAM,OAAO,KAAK;IACR,GAAG,GAAW,EAAE,CAAC;IACjB,GAAG,GAAW,EAAE,CAAC;IACjB,KAAK,CAAU;IACf,MAAM,CAAU;IAChB,GAAG,GAAyD,MAAM,CAAC;IACnE,IAAI,GAAY,KAAK,CAAC;IACtB,OAAO,GAAY,KAAK,CAAC;IACzB,MAAM,CAAU;IAEf,MAAM,GAAY,KAAK,CAAC;IACxB,KAAK,GAAY,KAAK,CAAC;IACvB,cAAc,GAAY,KAAK,CAAC;IAEzC;;;;OAIG;IAEH,eAAe;QACb,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAEO,UAAU,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC,CAAC;IACM,WAAW,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,EAAE;YAC/F,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACb,WACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,yBAAyB,EAAE,IAAI,CAAC,MAAM,EAAE,EAC1E,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACvC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,GAC3D,CACH,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,iBAAiB,2CAAa,CAC1C;YACA,IAAI,CAAC,cAAc,IAAI,CACtB,4DACE,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;gBAC9B,CAAC;gBAED,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,uBAAuB,GAAG,CAC/D,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({ tag: 'hb-image', styleUrl: 'image.css', shadow: true })\nexport class Image {\n @Prop() src: string = '';\n @Prop() alt: string = '';\n @Prop() width?: string;\n @Prop() height?: string;\n @Prop() fit: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' = 'fill';\n @Prop() lazy: boolean = false;\n @Prop() preview: boolean = false;\n @Prop() radius?: string;\n\n @State() loaded: boolean = false;\n @State() error: boolean = false;\n @State() previewVisible: boolean = false;\n\n /**\n * 换 src 时重置 loaded/error。\n * 修复 B5——修复前换 src 不清状态:坏图换好图卡在错误占位(error 不清零),\n * 好图换坏图 loaded 仍 true 造成短暂状态错乱。\n */\n @Watch('src')\n handleSrcChange() {\n this.loaded = false;\n this.error = false;\n }\n\n private handleLoad = () => {\n this.loaded = true;\n };\n private handleError = () => {\n this.error = true;\n };\n\n render() {\n return (\n <div class=\"hb-image\" style={{ width: this.width, height: this.height, borderRadius: this.radius }}>\n {!this.error ? (\n <img\n src={this.src}\n alt={this.alt}\n class={{ 'hb-image__inner': true, 'hb-image__inner--loaded': this.loaded }}\n style={{ objectFit: this.fit }}\n loading={this.lazy ? 'lazy' : undefined}\n onLoad={this.handleLoad}\n onError={this.handleError}\n onClick={() => this.preview && (this.previewVisible = true)}\n />\n ) : (\n <div class=\"hb-image__error\">图片加载失败</div>\n )}\n {this.previewVisible && (\n <div\n class=\"hb-image__preview\"\n onClick={() => {\n this.previewVisible = false;\n }}\n >\n <img src={this.src} alt={this.alt} class=\"hb-image__preview-img\" />\n </div>\n )}\n </div>\n );\n }\n}\n"]}
|
|
@@ -160,7 +160,7 @@ export class ImagePreview {
|
|
|
160
160
|
const imgStyle = {
|
|
161
161
|
transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,
|
|
162
162
|
};
|
|
163
|
-
return (h("div", { class: "hb-image-preview", onClick: this.handleOverlayClick }, h("div", { class: "hb-image-preview__wrapper" }, h("img", { class: "hb-image-preview__img", src: this.currentSrc, alt: "", style: imgStyle, onWheel: this.handleWheel })), this.isMulti && (h("button", { type: "button", class: "hb-image-preview__btn hb-image-preview__btn--prev", onClick: this.prev, "aria-label": "\u4E0A\u4E00\u5F20" }, "\u2039")), this.isMulti && (h("button", { type: "button", class: "hb-image-preview__btn hb-image-preview__btn--next", onClick: this.next, "aria-label": "\u4E0B\u4E00\u5F20" }, "\u203A")), h("div", { class: "hb-image-preview__toolbar", onClick:
|
|
163
|
+
return (h("div", { class: "hb-image-preview", onClick: this.handleOverlayClick }, h("div", { class: "hb-image-preview__wrapper" }, h("img", { class: "hb-image-preview__img", src: this.currentSrc, alt: "", style: imgStyle, onWheel: this.handleWheel })), this.isMulti && (h("button", { type: "button", class: "hb-image-preview__btn hb-image-preview__btn--prev", onClick: this.prev, "aria-label": "\u4E0A\u4E00\u5F20" }, "\u2039")), this.isMulti && (h("button", { type: "button", class: "hb-image-preview__btn hb-image-preview__btn--next", onClick: this.next, "aria-label": "\u4E0B\u4E00\u5F20" }, "\u203A")), h("div", { class: "hb-image-preview__toolbar", onClick: e => e.stopPropagation() }, h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.zoomOut, "aria-label": "\u7F29\u5C0F" }, "\uFF0D"), h("span", { class: "hb-image-preview__tool-label" }, Math.round(this.zoom * 100), "%"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.zoomIn, "aria-label": "\u653E\u5927" }, "\uFF0B"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleRotateLeft, "aria-label": "\u5DE6\u65CB" }, "\u21BA"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleRotateRight, "aria-label": "\u53F3\u65CB" }, "\u21BB"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.handleReset, "aria-label": "\u91CD\u7F6E" }, "\u27F2"), h("button", { type: "button", class: "hb-image-preview__tool", onClick: this.stopAndClose, "aria-label": "\u5173\u95ED" }, "\u2715")), h("button", { type: "button", class: "hb-image-preview__close", onClick: this.stopAndClose, "aria-label": "\u5173\u95ED" }, "\u00D7")));
|
|
164
164
|
}
|
|
165
165
|
static get is() { return "hb-image-preview"; }
|
|
166
166
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../src/components/ImagePreview/ImagePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n\nexport interface ImagePreviewChangeDetail {\n src: string;\n index: number;\n}\n\n/**\n * ImagePreview 图片预览组件\n * 点击图片后展示大图,支持缩放、旋转、多图切换\n */\n@Component({\n tag: 'hb-image-preview',\n styleUrl: 'image-preview.css',\n shadow: true,\n})\nexport class ImagePreview {\n @Element() el: HTMLElement;\n\n /** 是否显示预览(受控,可双向) */\n @Prop({ mutable: true }) modelValue: boolean = false;\n\n /** 单图源(srcList 为空时使用) */\n @Prop() src: string = '';\n\n /** 多图源列表 */\n @Prop() srcList: string[] = [];\n\n /** 多图当前索引 */\n @Prop({ mutable: true }) current: number = 0;\n\n /** 单次缩放步长 */\n @Prop() zoomStep: number = 0.2;\n\n /** 最小缩放比例 */\n @Prop() minZoom: number = 0.5;\n\n /** 最大缩放比例 */\n @Prop() maxZoom: number = 3;\n\n /** 关闭事件 */\n @Event() hbClose: EventEmitter<void>;\n\n /** 切换事件,detail 为 { src, index } */\n @Event() hbChange: EventEmitter<ImagePreviewChangeDetail>;\n\n /** 当前缩放比例 */\n @State() zoom: number = 1;\n\n /** 当前旋转角度 */\n @State() rotate: number = 0;\n\n private keyDownHandler = (e: KeyboardEvent) => {\n if (!this.modelValue) return;\n if (e.key === 'Escape') {\n this.close();\n } else if (e.key === 'ArrowLeft') {\n this.prev();\n } else if (e.key === 'ArrowRight') {\n this.next();\n }\n };\n\n @Watch('modelValue')\n handleVisibleChange(newVal: boolean) {\n if (newVal) {\n // 打开时重置缩放与旋转\n this.zoom = 1;\n this.rotate = 0;\n document.addEventListener('keydown', this.keyDownHandler);\n } else {\n document.removeEventListener('keydown', this.keyDownHandler);\n }\n }\n\n @Watch('current')\n handleCurrentChange() {\n // 切换图片时重置变换\n this.zoom = 1;\n this.rotate = 0;\n }\n\n componentDidLoad() {\n if (this.modelValue) {\n document.addEventListener('keydown', this.keyDownHandler);\n }\n }\n\n disconnectedCallback() {\n document.removeEventListener('keydown', this.keyDownHandler);\n }\n\n /** 实际可切换的图片列表 */\n private get imageList(): string[] {\n if (this.srcList && this.srcList.length > 0) {\n return this.srcList;\n }\n return this.src ? [this.src] : [];\n }\n\n private get currentIndex(): number {\n const list = this.imageList;\n if (list.length === 0) return 0;\n if (this.current < 0) return 0;\n if (this.current >= list.length) return list.length - 1;\n return this.current;\n }\n\n private get currentSrc(): string {\n const list = this.imageList;\n if (list.length === 0) return '';\n return list[this.currentIndex] || '';\n }\n\n private get isMulti(): boolean {\n return this.imageList.length > 1;\n }\n\n private close = () => {\n this.modelValue = false;\n this.hbClose.emit();\n };\n\n private emitChange() {\n this.hbChange.emit({ src: this.currentSrc, index: this.currentIndex });\n }\n\n private next = () => {\n const list = this.imageList;\n if (list.length <= 1) return;\n this.current = (this.currentIndex + 1) % list.length;\n this.emitChange();\n };\n\n private prev = () => {\n const list = this.imageList;\n if (list.length <= 1) return;\n this.current = (this.currentIndex - 1 + list.length) % list.length;\n this.emitChange();\n };\n\n private zoomIn = () => {\n const next = Math.min(this.zoom + this.zoomStep, this.maxZoom);\n this.zoom = Math.round(next * 100) / 100;\n };\n\n private zoomOut = () => {\n const next = Math.max(this.zoom - this.zoomStep, this.minZoom);\n this.zoom = Math.round(next * 100) / 100;\n };\n\n private handleReset = () => {\n this.zoom = 1;\n this.rotate = 0;\n };\n\n private handleRotateLeft = () => {\n this.rotate = this.rotate - 90;\n };\n\n private handleRotateRight = () => {\n this.rotate = this.rotate + 90;\n };\n\n /**\n * 滚轮缩放(平滑 + 像素级响应):\n * 按 deltaY 的绝对值映射缩放因子(小滚幅小步、大滚幅大步),\n * 并夹取到 [minZoom, maxZoom],避免抖动与越界。\n */\n private handleWheel = (e: WheelEvent) => {\n e.preventDefault();\n // 把 deltaY 映射成指数缩放系数:wheel 越快缩放越激进,但单次不超 zoomStep*2\n const dir = e.deltaY < 0 ? 1 : -1;\n const intensity = Math.min(Math.abs(e.deltaY) / 100, 2); // 0~2\n const factor = 1 + dir * this.zoomStep * Math.max(1, intensity);\n const next = Math.max(this.minZoom, Math.min(this.zoom * factor, this.maxZoom));\n // 平滑:小数位保留两位,避免浮点累积误差\n this.zoom = Math.round(next * 100) / 100;\n };\n\n /** 点击遮罩空白处关闭 */\n private handleOverlayClick = (e: MouseEvent) => {\n if (e.target === e.currentTarget) {\n this.close();\n }\n };\n\n private stopAndClose = (e: MouseEvent) => {\n e.stopPropagation();\n this.close();\n };\n\n render() {\n if (!this.modelValue) return null;\n\n const imgStyle = {\n transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,\n };\n\n return (\n <div class=\"hb-image-preview\" onClick={this.handleOverlayClick}>\n <div class=\"hb-image-preview__wrapper\">\n <img\n class=\"hb-image-preview__img\"\n src={this.currentSrc}\n alt=\"\"\n style={imgStyle}\n onWheel={this.handleWheel}\n />\n </div>\n\n {this.isMulti && (\n <button\n type=\"button\"\n class=\"hb-image-preview__btn hb-image-preview__btn--prev\"\n onClick={this.prev}\n aria-label=\"上一张\"\n >\n ‹\n </button>\n )}\n {this.isMulti && (\n <button\n type=\"button\"\n class=\"hb-image-preview__btn hb-image-preview__btn--next\"\n onClick={this.next}\n aria-label=\"下一张\"\n >\n ›\n </button>\n )}\n\n <div class=\"hb-image-preview__toolbar\" onClick={(e) => e.stopPropagation()}>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomOut} aria-label=\"缩小\">\n -\n </button>\n <span class=\"hb-image-preview__tool-label\">{Math.round(this.zoom * 100)}%</span>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomIn} aria-label=\"放大\">\n +\n </button>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateLeft} aria-label=\"左旋\">\n ↺\n </button>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateRight} aria-label=\"右旋\">\n ↻\n </button>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleReset} aria-label=\"重置\">\n ⟲\n </button>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.stopAndClose} aria-label=\"关闭\">\n ✕\n </button>\n </div>\n\n <button\n type=\"button\"\n class=\"hb-image-preview__close\"\n onClick={this.stopAndClose}\n aria-label=\"关闭\"\n >\n ×\n </button>\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ImagePreview.js","sourceRoot":"","sources":["../../../src/components/ImagePreview/ImagePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n\nexport interface ImagePreviewChangeDetail {\n src: string;\n index: number;\n}\n\n/**\n * ImagePreview 图片预览组件\n * 点击图片后展示大图,支持缩放、旋转、多图切换\n */\n@Component({\n tag: 'hb-image-preview',\n styleUrl: 'image-preview.css',\n shadow: true,\n})\nexport class ImagePreview {\n @Element() el: HTMLElement;\n\n /** 是否显示预览(受控,可双向) */\n @Prop({ mutable: true }) modelValue: boolean = false;\n\n /** 单图源(srcList 为空时使用) */\n @Prop() src: string = '';\n\n /** 多图源列表 */\n @Prop() srcList: string[] = [];\n\n /** 多图当前索引 */\n @Prop({ mutable: true }) current: number = 0;\n\n /** 单次缩放步长 */\n @Prop() zoomStep: number = 0.2;\n\n /** 最小缩放比例 */\n @Prop() minZoom: number = 0.5;\n\n /** 最大缩放比例 */\n @Prop() maxZoom: number = 3;\n\n /** 关闭事件 */\n @Event() hbClose: EventEmitter<void>;\n\n /** 切换事件,detail 为 { src, index } */\n @Event() hbChange: EventEmitter<ImagePreviewChangeDetail>;\n\n /** 当前缩放比例 */\n @State() zoom: number = 1;\n\n /** 当前旋转角度 */\n @State() rotate: number = 0;\n\n private keyDownHandler = (e: KeyboardEvent) => {\n if (!this.modelValue) return;\n if (e.key === 'Escape') {\n this.close();\n } else if (e.key === 'ArrowLeft') {\n this.prev();\n } else if (e.key === 'ArrowRight') {\n this.next();\n }\n };\n\n @Watch('modelValue')\n handleVisibleChange(newVal: boolean) {\n if (newVal) {\n // 打开时重置缩放与旋转\n this.zoom = 1;\n this.rotate = 0;\n document.addEventListener('keydown', this.keyDownHandler);\n } else {\n document.removeEventListener('keydown', this.keyDownHandler);\n }\n }\n\n @Watch('current')\n handleCurrentChange() {\n // 切换图片时重置变换\n this.zoom = 1;\n this.rotate = 0;\n }\n\n componentDidLoad() {\n if (this.modelValue) {\n document.addEventListener('keydown', this.keyDownHandler);\n }\n }\n\n disconnectedCallback() {\n document.removeEventListener('keydown', this.keyDownHandler);\n }\n\n /** 实际可切换的图片列表 */\n private get imageList(): string[] {\n if (this.srcList && this.srcList.length > 0) {\n return this.srcList;\n }\n return this.src ? [this.src] : [];\n }\n\n private get currentIndex(): number {\n const list = this.imageList;\n if (list.length === 0) return 0;\n if (this.current < 0) return 0;\n if (this.current >= list.length) return list.length - 1;\n return this.current;\n }\n\n private get currentSrc(): string {\n const list = this.imageList;\n if (list.length === 0) return '';\n return list[this.currentIndex] || '';\n }\n\n private get isMulti(): boolean {\n return this.imageList.length > 1;\n }\n\n private close = () => {\n this.modelValue = false;\n this.hbClose.emit();\n };\n\n private emitChange() {\n this.hbChange.emit({ src: this.currentSrc, index: this.currentIndex });\n }\n\n private next = () => {\n const list = this.imageList;\n if (list.length <= 1) return;\n this.current = (this.currentIndex + 1) % list.length;\n this.emitChange();\n };\n\n private prev = () => {\n const list = this.imageList;\n if (list.length <= 1) return;\n this.current = (this.currentIndex - 1 + list.length) % list.length;\n this.emitChange();\n };\n\n private zoomIn = () => {\n const next = Math.min(this.zoom + this.zoomStep, this.maxZoom);\n this.zoom = Math.round(next * 100) / 100;\n };\n\n private zoomOut = () => {\n const next = Math.max(this.zoom - this.zoomStep, this.minZoom);\n this.zoom = Math.round(next * 100) / 100;\n };\n\n private handleReset = () => {\n this.zoom = 1;\n this.rotate = 0;\n };\n\n private handleRotateLeft = () => {\n this.rotate = this.rotate - 90;\n };\n\n private handleRotateRight = () => {\n this.rotate = this.rotate + 90;\n };\n\n /**\n * 滚轮缩放(平滑 + 像素级响应):\n * 按 deltaY 的绝对值映射缩放因子(小滚幅小步、大滚幅大步),\n * 并夹取到 [minZoom, maxZoom],避免抖动与越界。\n */\n private handleWheel = (e: WheelEvent) => {\n e.preventDefault();\n // 把 deltaY 映射成指数缩放系数:wheel 越快缩放越激进,但单次不超 zoomStep*2\n const dir = e.deltaY < 0 ? 1 : -1;\n const intensity = Math.min(Math.abs(e.deltaY) / 100, 2); // 0~2\n const factor = 1 + dir * this.zoomStep * Math.max(1, intensity);\n const next = Math.max(this.minZoom, Math.min(this.zoom * factor, this.maxZoom));\n // 平滑:小数位保留两位,避免浮点累积误差\n this.zoom = Math.round(next * 100) / 100;\n };\n\n /** 点击遮罩空白处关闭 */\n private handleOverlayClick = (e: MouseEvent) => {\n if (e.target === e.currentTarget) {\n this.close();\n }\n };\n\n private stopAndClose = (e: MouseEvent) => {\n e.stopPropagation();\n this.close();\n };\n\n render() {\n if (!this.modelValue) return null;\n\n const imgStyle = {\n transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,\n };\n\n return (\n <div class=\"hb-image-preview\" onClick={this.handleOverlayClick}>\n <div class=\"hb-image-preview__wrapper\">\n <img class=\"hb-image-preview__img\" src={this.currentSrc} alt=\"\" style={imgStyle} onWheel={this.handleWheel} />\n </div>\n\n {this.isMulti && (\n <button type=\"button\" class=\"hb-image-preview__btn hb-image-preview__btn--prev\" onClick={this.prev} aria-label=\"上一张\">\n ‹\n </button>\n )}\n {this.isMulti && (\n <button type=\"button\" class=\"hb-image-preview__btn hb-image-preview__btn--next\" onClick={this.next} aria-label=\"下一张\">\n ›\n </button>\n )}\n\n <div class=\"hb-image-preview__toolbar\" onClick={e => e.stopPropagation()}>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomOut} aria-label=\"缩小\">\n -\n </button>\n <span class=\"hb-image-preview__tool-label\">{Math.round(this.zoom * 100)}%</span>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.zoomIn} aria-label=\"放大\">\n +\n </button>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateLeft} aria-label=\"左旋\">\n ↺\n </button>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleRotateRight} aria-label=\"右旋\">\n ↻\n </button>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.handleReset} aria-label=\"重置\">\n ⟲\n </button>\n <button type=\"button\" class=\"hb-image-preview__tool\" onClick={this.stopAndClose} aria-label=\"关闭\">\n ✕\n </button>\n </div>\n\n <button type=\"button\" class=\"hb-image-preview__close\" onClick={this.stopAndClose} aria-label=\"关闭\">\n ×\n </button>\n </div>\n );\n }\n}\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { hasInputValue, isClearVisible, sizeClassMap } from "../../utils/form-input-base";
|
|
3
|
+
import { activationClickHandler } from "../../utils/a11y";
|
|
3
4
|
/**
|
|
4
5
|
* Input 输入框组件
|
|
5
6
|
* 通过鼠标或键盘输入字符
|
|
@@ -212,11 +213,11 @@ export class Input {
|
|
|
212
213
|
render() {
|
|
213
214
|
const isTextarea = this.type === 'textarea';
|
|
214
215
|
const InputTag = isTextarea ? 'textarea' : 'input';
|
|
215
|
-
return (h("div", { key: '
|
|
216
|
+
return (h("div", { key: '541681cbcc3f5bc9f0d6ed4e8b5d5d41e498f2a1', class: {
|
|
216
217
|
...sizeClassMap('hb-input', this.size),
|
|
217
218
|
'hb-input--disabled': this.disabled,
|
|
218
219
|
'hb-input--focused': this.isFocused,
|
|
219
|
-
} }, this.prefixIcon && (h("span", { key: '
|
|
220
|
+
} }, this.prefixIcon && (h("span", { key: '5dc6ad6f39d472528e900654de37e13e42e7ea19', class: "hb-input__prefix" }, h("i", { key: '2f28864c2a8d60281eacbfe7c8d65b72e75744f9', class: this.prefixIcon }))), h(InputTag, { key: '2945de32bd65b0eb22849338aa0f4f966ccd0ad5', ref: el => (this.inputRef = el), type: isTextarea ? undefined : this.getInputType(), id: this.inputId, name: this.name, class: "hb-input__inner", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: this.readonly, autocomplete: this.autocomplete, autofocus: this.autofocus, maxlength: this.maxlength, minlength: this.minlength, rows: isTextarea ? this.rows : undefined, style: isTextarea ? { resize: this.autosize ? 'none' : this.resize || 'none' } : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), (this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (h("span", { key: '0b416f3f55c1b195bcfc7584eb96de3a47373b49', class: "hb-input__suffix" }, this.showClear && (h("span", { key: '4bd40fa20686602e0049f46bfe3a4ba1eedd704c', class: "hb-input__suffix-inner hb-input__clear", role: "button", "aria-label": "\u6E05\u7A7A", tabIndex: 0, onClick: this.handleClear, onKeyDown: activationClickHandler }, h("svg", { key: 'b4494db539d933d0686fad6744589955669ec402', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: '02fde0709695629e71d90104f58d2926ae77ce8b', d: "M6 6l12 12M18 6L6 18" })))), this.type === 'password' && this.showPassword && (h("span", { key: 'fed9e94f2f0491d97a06b2ca4faeb86d4d0b4d79', class: "hb-input__suffix-inner hb-input__password", role: "button", "aria-label": this.passwordVisible ? '隐藏密码' : '显示密码', tabIndex: 0, onClick: this.togglePasswordVisible, onKeyDown: activationClickHandler }, this.passwordVisible ? (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" }), h("circle", { cx: "12", cy: "12", r: "3" }))) : (h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3 3l18 18M10.6 10.6a3 3 0 0 0 4.2 4.2M9.9 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.8 17.8 0 0 1-2.2 3.2M6.1 6.1A17.7 17.7 0 0 0 2 12s3.5 7 10 7a10.5 10.5 0 0 0 4-.8" }))))), this.suffixIcon && (h("span", { key: 'b7c39885d1c3528746855cd852fed3274d055b0f', class: "hb-input__suffix-inner" }, h("i", { key: 'e6952c4362150d3140feffaa51d9c0ac7f00a4b8', class: this.suffixIcon }))))), this.showWordLimit && this.maxlength && (h("span", { key: 'a6d207cc284a30911e3d17cd44bac5e061c20fac', class: "hb-input__count" }, h("span", { key: '52fa6d789528a8079d34fc4082b0532f52ce43ef', class: "hb-input__count-inner" }, this.inputValue.length, " / ", this.maxlength)))));
|
|
220
221
|
}
|
|
221
222
|
static get is() { return "hb-input"; }
|
|
222
223
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { ComponentSize, hasInputValue, isClearVisible, sizeClassMap } from '../../utils/form-input-base';\n\n/**\n * Input 输入框组件\n * 通过鼠标或键盘输入字符\n */\n@Component({\n tag: 'hb-input',\n styleUrl: 'input.css',\n shadow: true,\n})\nexport class Input {\n @Element() el: HTMLElement;\n\n /**\n * 绑定值\n */\n @Prop({ mutable: true }) modelValue: string = '';\n\n /**\n * 输入框类型\n */\n @Prop() type: string = 'text';\n\n /**\n * 输入框尺寸\n */\n @Prop() size: ComponentSize = 'default';\n\n /**\n * 是否禁用\n * @default false\n */\n @Prop() disabled: boolean = false;\n\n /**\n * 是否只读\n * @default false\n */\n @Prop() readonly: boolean = false;\n\n /**\n * 输入框占位文本\n */\n @Prop() placeholder?: string;\n\n /**\n * 是否可清空\n * @default false\n */\n @Prop() clearable: boolean = false;\n\n /**\n * 是否显示密码可见性切换\n * @default false\n */\n @Prop() showPassword: boolean = false;\n\n /**\n * 是否显示字数统计\n * @default false\n */\n @Prop() showWordLimit: boolean = false;\n\n /**\n * 最大输入长度\n */\n @Prop() maxlength?: number;\n\n /**\n * 最小输入长度\n */\n @Prop() minlength?: number;\n\n /**\n * 原生 name 属性\n */\n @Prop() name?: string;\n\n /**\n * 原生 id 属性\n */\n @Prop() inputId?: string;\n\n /**\n * 原生 autocomplete 属性\n */\n @Prop() autocomplete?: string;\n\n /**\n * 原生 autofocus 属性\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * 输入框头部图标\n */\n @Prop() prefixIcon?: string;\n\n /**\n * 输入框尾部图标\n */\n @Prop() suffixIcon?: string;\n\n /**\n * 输入框行数,仅 type 为 'textarea' 时有效\n */\n @Prop() rows: number = 2;\n\n /**\n * 是否自适应内容高度,仅 type 为 'textarea' 时有效\n */\n @Prop() autosize: boolean | { minRows?: number; maxRows?: number } = false;\n\n /**\n * 是否调整 textarea 大小\n */\n @Prop() resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n\n @State() isFocused: boolean = false;\n @State() showClear: boolean = false;\n @State() passwordVisible: boolean = false;\n @State() inputValue: string = '';\n\n private inputRef?: HTMLInputElement | HTMLTextAreaElement;\n\n /**\n * 值改变事件\n */\n @Event() hbChange: EventEmitter<string>;\n\n /**\n * 输入事件\n */\n @Event() hbInput: EventEmitter<string>;\n\n /**\n * 聚焦事件\n */\n @Event() hbFocus: EventEmitter<FocusEvent>;\n\n /**\n * 失焦事件\n */\n @Event() hbBlur: EventEmitter<FocusEvent>;\n\n /**\n * 清空事件\n */\n @Event() hbClear: EventEmitter<void>;\n\n @Watch('modelValue')\n handleValueChange() {\n this.inputValue = this.modelValue;\n this.updateClearVisible();\n // textarea autosize:外部改值也要重算高度\n this.resizeTextarea();\n }\n\n componentDidLoad() {\n this.inputValue = this.modelValue;\n this.updateClearVisible();\n this.resizeTextarea();\n }\n\n private updateClearVisible() {\n this.showClear = isClearVisible({\n clearable: this.clearable,\n disabled: this.disabled,\n readonly: this.readonly,\n hasValue: hasInputValue(this.inputValue),\n });\n }\n\n /**\n * textarea 自适应高度(autosize)。\n * - autosize=false 或非 textarea:跳过。\n * - autosize=true:按内容自适应。\n * - autosize={minRows,maxRows}:在最小/最大行数间夹取。\n * 算法:先把 height 置 auto 让浏览器按内容重排,再读 scrollHeight,\n * 减去 padding 后按行高换算成行数,最后按 min/max 夹取并写回 height。\n */\n private resizeTextarea() {\n if (this.type !== 'textarea' || !this.autosize) return;\n const ta = this.inputRef as HTMLTextAreaElement | undefined;\n if (!ta) return;\n\n // 行高:优先取计算样式,兜底 22px\n const computed = typeof window !== 'undefined' ? window.getComputedStyle(ta) : null;\n const lineHeight = computed && parseFloat(computed.lineHeight) ? parseFloat(computed.lineHeight) : 22;\n const paddingTop = computed ? parseFloat(computed.paddingTop) || 0 : 0;\n const paddingBottom = computed ? parseFloat(computed.paddingBottom) || 0 : 0;\n\n const opts = typeof this.autosize === 'object' ? this.autosize : {};\n const minRows = opts.minRows ?? 1;\n const maxRows = opts.maxRows ?? Infinity;\n\n const minH = minRows * lineHeight + paddingTop + paddingBottom;\n const maxH = maxRows === Infinity ? Infinity : maxRows * lineHeight + paddingTop + paddingBottom;\n\n // 先 reset 高度以读取真实内容高度\n ta.style.height = 'auto';\n const scrollH = ta.scrollHeight;\n const clamped = Math.max(minH, Math.min(scrollH, maxH === Infinity ? scrollH : maxH));\n ta.style.height = `${clamped}px`;\n // overflow:能滚动时才显示滚动条\n ta.style.overflowY = scrollH > clamped ? 'auto' : 'hidden';\n }\n\n private handleInput = (e: Event) => {\n const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n this.inputValue = target.value;\n this.modelValue = target.value;\n this.updateClearVisible();\n this.hbInput.emit(target.value);\n this.resizeTextarea();\n };\n\n private handleChange = (e: Event) => {\n const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n this.hbChange.emit(target.value);\n };\n\n private handleFocus = (e: FocusEvent) => {\n this.isFocused = true;\n this.updateClearVisible();\n this.hbFocus.emit(e);\n };\n\n private handleBlur = (e: FocusEvent) => {\n this.isFocused = false;\n this.updateClearVisible();\n this.hbBlur.emit(e);\n };\n\n private handleClear = (e: Event) => {\n e.stopPropagation();\n this.inputValue = '';\n this.modelValue = '';\n this.updateClearVisible();\n this.hbClear.emit();\n this.hbChange.emit('');\n if (this.inputRef) {\n this.inputRef.focus();\n }\n };\n\n private togglePasswordVisible = () => {\n this.passwordVisible = !this.passwordVisible;\n };\n\n private getInputType(): string {\n if (this.type === 'password' && this.showPassword) {\n return this.passwordVisible ? 'text' : 'password';\n }\n return this.type;\n }\n\n render() {\n const isTextarea = this.type === 'textarea';\n const InputTag = isTextarea ? 'textarea' : 'input';\n\n return (\n <div\n class={{\n ...sizeClassMap('hb-input', this.size),\n 'hb-input--disabled': this.disabled,\n 'hb-input--focused': this.isFocused,\n }}\n >\n {this.prefixIcon && (\n <span class=\"hb-input__prefix\">\n <i class={this.prefixIcon}></i>\n </span>\n )}\n <InputTag\n ref={(el) => (this.inputRef = el)}\n type={isTextarea ? undefined : this.getInputType()}\n id={this.inputId}\n name={this.name}\n class=\"hb-input__inner\"\n placeholder={this.placeholder}\n value={this.inputValue}\n disabled={this.disabled}\n readonly={this.readonly}\n autocomplete={this.autocomplete}\n autofocus={this.autofocus}\n maxlength={this.maxlength}\n minlength={this.minlength}\n rows={isTextarea ? this.rows : undefined}\n style={isTextarea ? { resize: this.autosize ? 'none' : (this.resize || 'none') } : undefined}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {(this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (\n <span class=\"hb-input__suffix\">\n {this.showClear && (\n <span class=\"hb-input__suffix-inner hb-input__clear\" role=\"button\" aria-label=\"清空\" onClick={this.handleClear}>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M6 6l12 12M18 6L6 18\" />\n </svg>\n </span>\n )}\n {this.type === 'password' && this.showPassword && (\n <span\n class=\"hb-input__suffix-inner hb-input__password\"\n role=\"button\"\n aria-label={this.passwordVisible ? '隐藏密码' : '显示密码'}\n onClick={this.togglePasswordVisible}\n >\n {this.passwordVisible ? (\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n ) : (\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 3l18 18M10.6 10.6a3 3 0 0 0 4.2 4.2M9.9 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.8 17.8 0 0 1-2.2 3.2M6.1 6.1A17.7 17.7 0 0 0 2 12s3.5 7 10 7a10.5 10.5 0 0 0 4-.8\" />\n </svg>\n )}\n </span>\n )}\n {this.suffixIcon && (\n <span class=\"hb-input__suffix-inner\">\n <i class={this.suffixIcon}></i>\n </span>\n )}\n </span>\n )}\n {this.showWordLimit && this.maxlength && (\n <span class=\"hb-input__count\">\n <span class=\"hb-input__count-inner\">\n {this.inputValue.length} / {this.maxlength}\n </span>\n </span>\n )}\n </div>\n );\n }\n}\n\n"]}
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { ComponentSize, hasInputValue, isClearVisible, sizeClassMap } from '../../utils/form-input-base';\nimport { activationClickHandler } from '../../utils/a11y';\n\n/**\n * Input 输入框组件\n * 通过鼠标或键盘输入字符\n */\n@Component({\n tag: 'hb-input',\n styleUrl: 'input.css',\n shadow: true,\n})\nexport class Input {\n @Element() el: HTMLElement;\n\n /**\n * 绑定值\n */\n @Prop({ mutable: true }) modelValue: string = '';\n\n /**\n * 输入框类型\n */\n @Prop() type: string = 'text';\n\n /**\n * 输入框尺寸\n */\n @Prop() size: ComponentSize = 'default';\n\n /**\n * 是否禁用\n * @default false\n */\n @Prop() disabled: boolean = false;\n\n /**\n * 是否只读\n * @default false\n */\n @Prop() readonly: boolean = false;\n\n /**\n * 输入框占位文本\n */\n @Prop() placeholder?: string;\n\n /**\n * 是否可清空\n * @default false\n */\n @Prop() clearable: boolean = false;\n\n /**\n * 是否显示密码可见性切换\n * @default false\n */\n @Prop() showPassword: boolean = false;\n\n /**\n * 是否显示字数统计\n * @default false\n */\n @Prop() showWordLimit: boolean = false;\n\n /**\n * 最大输入长度\n */\n @Prop() maxlength?: number;\n\n /**\n * 最小输入长度\n */\n @Prop() minlength?: number;\n\n /**\n * 原生 name 属性\n */\n @Prop() name?: string;\n\n /**\n * 原生 id 属性\n */\n @Prop() inputId?: string;\n\n /**\n * 原生 autocomplete 属性\n */\n @Prop() autocomplete?: string;\n\n /**\n * 原生 autofocus 属性\n */\n @Prop() autofocus: boolean = false;\n\n /**\n * 输入框头部图标\n */\n @Prop() prefixIcon?: string;\n\n /**\n * 输入框尾部图标\n */\n @Prop() suffixIcon?: string;\n\n /**\n * 输入框行数,仅 type 为 'textarea' 时有效\n */\n @Prop() rows: number = 2;\n\n /**\n * 是否自适应内容高度,仅 type 为 'textarea' 时有效\n */\n @Prop() autosize: boolean | { minRows?: number; maxRows?: number } = false;\n\n /**\n * 是否调整 textarea 大小\n */\n @Prop() resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n\n @State() isFocused: boolean = false;\n @State() showClear: boolean = false;\n @State() passwordVisible: boolean = false;\n @State() inputValue: string = '';\n\n private inputRef?: HTMLInputElement | HTMLTextAreaElement;\n\n /**\n * 值改变事件\n */\n @Event() hbChange: EventEmitter<string>;\n\n /**\n * 输入事件\n */\n @Event() hbInput: EventEmitter<string>;\n\n /**\n * 聚焦事件\n */\n @Event() hbFocus: EventEmitter<FocusEvent>;\n\n /**\n * 失焦事件\n */\n @Event() hbBlur: EventEmitter<FocusEvent>;\n\n /**\n * 清空事件\n */\n @Event() hbClear: EventEmitter<void>;\n\n @Watch('modelValue')\n handleValueChange() {\n this.inputValue = this.modelValue;\n this.updateClearVisible();\n // textarea autosize:外部改值也要重算高度\n this.resizeTextarea();\n }\n\n componentDidLoad() {\n this.inputValue = this.modelValue;\n this.updateClearVisible();\n this.resizeTextarea();\n }\n\n private updateClearVisible() {\n this.showClear = isClearVisible({\n clearable: this.clearable,\n disabled: this.disabled,\n readonly: this.readonly,\n hasValue: hasInputValue(this.inputValue),\n });\n }\n\n /**\n * textarea 自适应高度(autosize)。\n * - autosize=false 或非 textarea:跳过。\n * - autosize=true:按内容自适应。\n * - autosize={minRows,maxRows}:在最小/最大行数间夹取。\n * 算法:先把 height 置 auto 让浏览器按内容重排,再读 scrollHeight,\n * 减去 padding 后按行高换算成行数,最后按 min/max 夹取并写回 height。\n */\n private resizeTextarea() {\n if (this.type !== 'textarea' || !this.autosize) return;\n const ta = this.inputRef as HTMLTextAreaElement | undefined;\n if (!ta) return;\n\n // 行高:优先取计算样式,兜底 22px\n const computed = typeof window !== 'undefined' ? window.getComputedStyle(ta) : null;\n const lineHeight = computed && parseFloat(computed.lineHeight) ? parseFloat(computed.lineHeight) : 22;\n const paddingTop = computed ? parseFloat(computed.paddingTop) || 0 : 0;\n const paddingBottom = computed ? parseFloat(computed.paddingBottom) || 0 : 0;\n\n const opts = typeof this.autosize === 'object' ? this.autosize : {};\n const minRows = opts.minRows ?? 1;\n const maxRows = opts.maxRows ?? Infinity;\n\n const minH = minRows * lineHeight + paddingTop + paddingBottom;\n const maxH = maxRows === Infinity ? Infinity : maxRows * lineHeight + paddingTop + paddingBottom;\n\n // 先 reset 高度以读取真实内容高度\n ta.style.height = 'auto';\n const scrollH = ta.scrollHeight;\n const clamped = Math.max(minH, Math.min(scrollH, maxH === Infinity ? scrollH : maxH));\n ta.style.height = `${clamped}px`;\n // overflow:能滚动时才显示滚动条\n ta.style.overflowY = scrollH > clamped ? 'auto' : 'hidden';\n }\n\n private handleInput = (e: Event) => {\n const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n this.inputValue = target.value;\n this.modelValue = target.value;\n this.updateClearVisible();\n this.hbInput.emit(target.value);\n this.resizeTextarea();\n };\n\n private handleChange = (e: Event) => {\n const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n this.hbChange.emit(target.value);\n };\n\n private handleFocus = (e: FocusEvent) => {\n this.isFocused = true;\n this.updateClearVisible();\n this.hbFocus.emit(e);\n };\n\n private handleBlur = (e: FocusEvent) => {\n this.isFocused = false;\n this.updateClearVisible();\n this.hbBlur.emit(e);\n };\n\n private handleClear = (e: Event) => {\n e.stopPropagation();\n this.inputValue = '';\n this.modelValue = '';\n this.updateClearVisible();\n this.hbClear.emit();\n this.hbChange.emit('');\n if (this.inputRef) {\n this.inputRef.focus();\n }\n };\n\n private togglePasswordVisible = () => {\n this.passwordVisible = !this.passwordVisible;\n };\n\n private getInputType(): string {\n if (this.type === 'password' && this.showPassword) {\n return this.passwordVisible ? 'text' : 'password';\n }\n return this.type;\n }\n\n render() {\n const isTextarea = this.type === 'textarea';\n const InputTag = isTextarea ? 'textarea' : 'input';\n\n return (\n <div\n class={{\n ...sizeClassMap('hb-input', this.size),\n 'hb-input--disabled': this.disabled,\n 'hb-input--focused': this.isFocused,\n }}\n >\n {this.prefixIcon && (\n <span class=\"hb-input__prefix\">\n <i class={this.prefixIcon}></i>\n </span>\n )}\n <InputTag\n ref={el => (this.inputRef = el)}\n type={isTextarea ? undefined : this.getInputType()}\n id={this.inputId}\n name={this.name}\n class=\"hb-input__inner\"\n placeholder={this.placeholder}\n value={this.inputValue}\n disabled={this.disabled}\n readonly={this.readonly}\n autocomplete={this.autocomplete}\n autofocus={this.autofocus}\n maxlength={this.maxlength}\n minlength={this.minlength}\n rows={isTextarea ? this.rows : undefined}\n style={isTextarea ? { resize: this.autosize ? 'none' : this.resize || 'none' } : undefined}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n {(this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (\n <span class=\"hb-input__suffix\">\n {this.showClear && (\n <span class=\"hb-input__suffix-inner hb-input__clear\" role=\"button\" aria-label=\"清空\" tabIndex={0} onClick={this.handleClear} onKeyDown={activationClickHandler}>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M6 6l12 12M18 6L6 18\" />\n </svg>\n </span>\n )}\n {this.type === 'password' && this.showPassword && (\n <span\n class=\"hb-input__suffix-inner hb-input__password\"\n role=\"button\"\n aria-label={this.passwordVisible ? '隐藏密码' : '显示密码'}\n tabIndex={0}\n onClick={this.togglePasswordVisible}\n onKeyDown={activationClickHandler}\n >\n {this.passwordVisible ? (\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n ) : (\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width={2} stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 3l18 18M10.6 10.6a3 3 0 0 0 4.2 4.2M9.9 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.8 17.8 0 0 1-2.2 3.2M6.1 6.1A17.7 17.7 0 0 0 2 12s3.5 7 10 7a10.5 10.5 0 0 0 4-.8\" />\n </svg>\n )}\n </span>\n )}\n {this.suffixIcon && (\n <span class=\"hb-input__suffix-inner\">\n <i class={this.suffixIcon}></i>\n </span>\n )}\n </span>\n )}\n {this.showWordLimit && this.maxlength && (\n <span class=\"hb-input__count\">\n <span class=\"hb-input__count-inner\">\n {this.inputValue.length} / {this.maxlength}\n </span>\n </span>\n )}\n </div>\n );\n }\n}\n"]}
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
height: 100%;
|
|
141
141
|
}
|
|
142
142
|
|
|
143
|
-
.hb-input__inner[type=
|
|
143
|
+
.hb-input__inner[type='textarea'] {
|
|
144
144
|
min-height: 60px;
|
|
145
145
|
padding: 5px 15px;
|
|
146
146
|
line-height: 1.5;
|
|
@@ -160,4 +160,3 @@
|
|
|
160
160
|
background-color: var(--hb-input-bg-color);
|
|
161
161
|
padding: 0 4px;
|
|
162
162
|
}
|
|
163
|
-
|
|
@@ -129,25 +129,25 @@ export class InputNumber {
|
|
|
129
129
|
this.hbChange.emit(newValue);
|
|
130
130
|
};
|
|
131
131
|
render() {
|
|
132
|
-
return (h("div", { key: '
|
|
132
|
+
return (h("div", { key: 'cf809c8e0c9c722a4be473a3455626f58aab40d9', class: {
|
|
133
133
|
'hb-input-number': true,
|
|
134
134
|
[`hb-input-number--${this.size}`]: true,
|
|
135
135
|
'hb-input-number--disabled': this.disabled,
|
|
136
136
|
'hb-input-number--controls-right': this.controlsPosition === 'right',
|
|
137
137
|
'hb-input-number--without-controls': !this.controls,
|
|
138
|
-
} }, this.controls && this.controlsPosition !== 'right' && (h("
|
|
138
|
+
} }, this.controls && this.controlsPosition !== 'right' && (h("button", { key: 'b97e5a774d7747fa61ee59650517ab0f64167dda', type: "button", class: {
|
|
139
139
|
'hb-input-number__decrease': true,
|
|
140
140
|
'hb-input-number__decrease--disabled': this.currentValue <= this.min,
|
|
141
|
-
}, onClick: this.decrease }, "\u2212")), h("input", { key: '
|
|
141
|
+
}, "aria-label": "\u51CF\u5C11", "aria-disabled": this.currentValue <= this.min || this.disabled, disabled: this.currentValue <= this.min || this.disabled, onClick: this.decrease }, "\u2212")), h("input", { key: '3b5357639f8b3676bb4de27dd67297288020a97f', type: "number", id: this.inputId, name: this.name, class: "hb-input-number__inner", value: this.currentValue, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, onInput: this.handleInput, onChange: this.handleChange }), this.controls && this.controlsPosition === 'right' && (h("span", { key: '00f8a845f5226999d02914ba6e62a29d24f1a26f', class: "hb-input-number__controls" }, h("button", { key: '886db946083adb10bdf8312dc985194b872000c4', type: "button", class: {
|
|
142
142
|
'hb-input-number__increase': true,
|
|
143
143
|
'hb-input-number__increase--disabled': this.currentValue >= this.max,
|
|
144
|
-
}, onClick: this.increase }, "+"), h("
|
|
144
|
+
}, "aria-label": "\u589E\u52A0", "aria-disabled": this.currentValue >= this.max || this.disabled, disabled: this.currentValue >= this.max || this.disabled, onClick: this.increase }, "+"), h("button", { key: '9c9b8d9fa6871e354a38bd5691d0a01b0b87cf9a', type: "button", class: {
|
|
145
145
|
'hb-input-number__decrease': true,
|
|
146
146
|
'hb-input-number__decrease--disabled': this.currentValue <= this.min,
|
|
147
|
-
}, onClick: this.decrease }, "\u2212"))), this.controls && this.controlsPosition !== 'right' && (h("
|
|
147
|
+
}, "aria-label": "\u51CF\u5C11", "aria-disabled": this.currentValue <= this.min || this.disabled, disabled: this.currentValue <= this.min || this.disabled, onClick: this.decrease }, "\u2212"))), this.controls && this.controlsPosition !== 'right' && (h("button", { key: 'c32d05810f4c0d9cd660483f45aac0f0f7ac48a5', type: "button", class: {
|
|
148
148
|
'hb-input-number__increase': true,
|
|
149
149
|
'hb-input-number__increase--disabled': this.currentValue >= this.max,
|
|
150
|
-
}, onClick: this.increase }, "+"))));
|
|
150
|
+
}, "aria-label": "\u589E\u52A0", "aria-disabled": this.currentValue >= this.max || this.disabled, disabled: this.currentValue >= this.max || this.disabled, onClick: this.increase }, "+"))));
|
|
151
151
|
}
|
|
152
152
|
static get is() { return "hb-input-number"; }
|
|
153
153
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputNumber.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * InputNumber 数字输入框组件\n * 仅允许输入标准的数字值,可定义范围\n */\n@Component({\n tag: 'hb-input-number',\n styleUrl: 'input-number.css',\n shadow: true,\n})\nexport class InputNumber {\n /**\n * 绑定值\n */\n @Prop({ mutable: true }) modelValue: number = 0;\n\n /**\n * 计数器尺寸\n */\n @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n /**\n * 是否禁用\n * @default false\n */\n @Prop() disabled: boolean = false;\n\n /**\n * 是否只读\n * @default false\n */\n @Prop() readonly: boolean = false;\n\n /**\n * 最小值\n * @default -Infinity\n */\n @Prop() min: number = -Infinity;\n\n /**\n * 最大值\n * @default Infinity\n */\n @Prop() max: number = Infinity;\n\n /**\n * 计数器步长\n * @default 1\n */\n @Prop() step: number = 1;\n\n /**\n * 精度\n */\n @Prop() precision?: number;\n\n /**\n * 是否只能输入 step 的倍数\n * @default false\n */\n @Prop() stepStrictly: boolean = false;\n\n /**\n * 是否使用控制按钮\n * @default true\n */\n @Prop() controls: boolean = true;\n\n /**\n * 控制按钮位置\n */\n @Prop() controlsPosition: '' | 'right' = '';\n\n /**\n * 原生 name 属性\n */\n @Prop() name?: string;\n\n /**\n * 原生 id 属性\n */\n @Prop() inputId?: string;\n\n /**\n * 原生 placeholder 属性\n */\n @Prop() placeholder?: string;\n\n @State() currentValue: number = 0;\n\n /**\n * 值改变事件\n */\n @Event() hbChange: EventEmitter<number>;\n\n /**\n * 输入事件\n */\n @Event() hbInput: EventEmitter<number>;\n\n componentDidLoad() {\n this.currentValue = this.modelValue;\n }\n\n /** 受控模式:外部修改 modelValue 时同步内部 currentValue,保证 UI 与值一致 */\n @Watch('modelValue')\n handleModelValueChange() {\n this.currentValue = this.modelValue;\n }\n\n private formatValue(value: number): number {\n if (this.precision !== undefined) {\n return Number(value.toFixed(this.precision));\n }\n return value;\n }\n\n private clampValue(value: number): number {\n let clamped = Math.max(this.min, Math.min(this.max, value));\n \n if (this.stepStrictly) {\n const step = this.step;\n clamped = Math.round(clamped / step) * step;\n }\n \n return this.formatValue(clamped);\n }\n\n private handleInput = (e: Event) => {\n const target = e.target as HTMLInputElement;\n const value = parseFloat(target.value);\n \n if (isNaN(value)) {\n this.currentValue = this.min;\n } else {\n this.currentValue = this.clampValue(value);\n }\n \n this.modelValue = this.currentValue;\n this.hbInput.emit(this.currentValue);\n };\n\n private handleChange = () => {\n this.hbChange.emit(this.currentValue);\n };\n\n private increase = () => {\n if (this.disabled || this.readonly) return;\n const newValue = this.clampValue(this.currentValue + this.step);\n this.currentValue = newValue;\n this.modelValue = newValue;\n this.hbChange.emit(newValue);\n };\n\n private decrease = () => {\n if (this.disabled || this.readonly) return;\n const newValue = this.clampValue(this.currentValue - this.step);\n this.currentValue = newValue;\n this.modelValue = newValue;\n this.hbChange.emit(newValue);\n };\n\n render() {\n return (\n <div\n class={{\n 'hb-input-number': true,\n [`hb-input-number--${this.size}`]: true,\n 'hb-input-number--disabled': this.disabled,\n 'hb-input-number--controls-right': this.controlsPosition === 'right',\n 'hb-input-number--without-controls': !this.controls,\n }}\n >\n {this.controls && this.controlsPosition !== 'right' && (\n <span\n class={{\n 'hb-input-number__decrease': true,\n 'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n }}\n onClick={this.decrease}\n >\n −\n </span>\n )}\n <input\n type=\"number\"\n id={this.inputId}\n name={this.name}\n class=\"hb-input-number__inner\"\n value={this.currentValue}\n disabled={this.disabled}\n readonly={this.readonly}\n placeholder={this.placeholder}\n min={this.min}\n max={this.max}\n step={this.step}\n onInput={this.handleInput}\n onChange={this.handleChange}\n />\n {this.controls && this.controlsPosition === 'right' && (\n <span class=\"hb-input-number__controls\">\n <span\n class={{\n 'hb-input-number__increase': true,\n 'hb-input-number__increase--disabled': this.currentValue >= this.max,\n }}\n onClick={this.increase}\n >\n +\n </span>\n <span\n class={{\n 'hb-input-number__decrease': true,\n 'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n }}\n onClick={this.decrease}\n >\n −\n </span>\n </span>\n )}\n {this.controls && this.controlsPosition !== 'right' && (\n <span\n class={{\n 'hb-input-number__increase': true,\n 'hb-input-number__increase--disabled': this.currentValue >= this.max,\n }}\n onClick={this.increase}\n >\n +\n </span>\n )}\n </div>\n );\n }\n}\n\n"]}
|
|
1
|
+
{"version":3,"file":"InputNumber.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * InputNumber 数字输入框组件\n * 仅允许输入标准的数字值,可定义范围\n */\n@Component({\n tag: 'hb-input-number',\n styleUrl: 'input-number.css',\n shadow: true,\n})\nexport class InputNumber {\n /**\n * 绑定值\n */\n @Prop({ mutable: true }) modelValue: number = 0;\n\n /**\n * 计数器尺寸\n */\n @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n /**\n * 是否禁用\n * @default false\n */\n @Prop() disabled: boolean = false;\n\n /**\n * 是否只读\n * @default false\n */\n @Prop() readonly: boolean = false;\n\n /**\n * 最小值\n * @default -Infinity\n */\n @Prop() min: number = -Infinity;\n\n /**\n * 最大值\n * @default Infinity\n */\n @Prop() max: number = Infinity;\n\n /**\n * 计数器步长\n * @default 1\n */\n @Prop() step: number = 1;\n\n /**\n * 精度\n */\n @Prop() precision?: number;\n\n /**\n * 是否只能输入 step 的倍数\n * @default false\n */\n @Prop() stepStrictly: boolean = false;\n\n /**\n * 是否使用控制按钮\n * @default true\n */\n @Prop() controls: boolean = true;\n\n /**\n * 控制按钮位置\n */\n @Prop() controlsPosition: '' | 'right' = '';\n\n /**\n * 原生 name 属性\n */\n @Prop() name?: string;\n\n /**\n * 原生 id 属性\n */\n @Prop() inputId?: string;\n\n /**\n * 原生 placeholder 属性\n */\n @Prop() placeholder?: string;\n\n @State() currentValue: number = 0;\n\n /**\n * 值改变事件\n */\n @Event() hbChange: EventEmitter<number>;\n\n /**\n * 输入事件\n */\n @Event() hbInput: EventEmitter<number>;\n\n componentDidLoad() {\n this.currentValue = this.modelValue;\n }\n\n /** 受控模式:外部修改 modelValue 时同步内部 currentValue,保证 UI 与值一致 */\n @Watch('modelValue')\n handleModelValueChange() {\n this.currentValue = this.modelValue;\n }\n\n private formatValue(value: number): number {\n if (this.precision !== undefined) {\n return Number(value.toFixed(this.precision));\n }\n return value;\n }\n\n private clampValue(value: number): number {\n let clamped = Math.max(this.min, Math.min(this.max, value));\n\n if (this.stepStrictly) {\n const step = this.step;\n clamped = Math.round(clamped / step) * step;\n }\n\n return this.formatValue(clamped);\n }\n\n private handleInput = (e: Event) => {\n const target = e.target as HTMLInputElement;\n const value = parseFloat(target.value);\n\n if (isNaN(value)) {\n this.currentValue = this.min;\n } else {\n this.currentValue = this.clampValue(value);\n }\n\n this.modelValue = this.currentValue;\n this.hbInput.emit(this.currentValue);\n };\n\n private handleChange = () => {\n this.hbChange.emit(this.currentValue);\n };\n\n private increase = () => {\n if (this.disabled || this.readonly) return;\n const newValue = this.clampValue(this.currentValue + this.step);\n this.currentValue = newValue;\n this.modelValue = newValue;\n this.hbChange.emit(newValue);\n };\n\n private decrease = () => {\n if (this.disabled || this.readonly) return;\n const newValue = this.clampValue(this.currentValue - this.step);\n this.currentValue = newValue;\n this.modelValue = newValue;\n this.hbChange.emit(newValue);\n };\n\n render() {\n return (\n <div\n class={{\n 'hb-input-number': true,\n [`hb-input-number--${this.size}`]: true,\n 'hb-input-number--disabled': this.disabled,\n 'hb-input-number--controls-right': this.controlsPosition === 'right',\n 'hb-input-number--without-controls': !this.controls,\n }}\n >\n {this.controls && this.controlsPosition !== 'right' && (\n <button\n type=\"button\"\n class={{\n 'hb-input-number__decrease': true,\n 'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n }}\n aria-label=\"减少\"\n aria-disabled={this.currentValue <= this.min || this.disabled}\n disabled={this.currentValue <= this.min || this.disabled}\n onClick={this.decrease}\n >\n −\n </button>\n )}\n <input\n type=\"number\"\n id={this.inputId}\n name={this.name}\n class=\"hb-input-number__inner\"\n value={this.currentValue}\n disabled={this.disabled}\n readonly={this.readonly}\n placeholder={this.placeholder}\n min={this.min}\n max={this.max}\n step={this.step}\n onInput={this.handleInput}\n onChange={this.handleChange}\n />\n {this.controls && this.controlsPosition === 'right' && (\n <span class=\"hb-input-number__controls\">\n <button\n type=\"button\"\n class={{\n 'hb-input-number__increase': true,\n 'hb-input-number__increase--disabled': this.currentValue >= this.max,\n }}\n aria-label=\"增加\"\n aria-disabled={this.currentValue >= this.max || this.disabled}\n disabled={this.currentValue >= this.max || this.disabled}\n onClick={this.increase}\n >\n +\n </button>\n <button\n type=\"button\"\n class={{\n 'hb-input-number__decrease': true,\n 'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n }}\n aria-label=\"减少\"\n aria-disabled={this.currentValue <= this.min || this.disabled}\n disabled={this.currentValue <= this.min || this.disabled}\n onClick={this.decrease}\n >\n −\n </button>\n </span>\n )}\n {this.controls && this.controlsPosition !== 'right' && (\n <button\n type=\"button\"\n class={{\n 'hb-input-number__increase': true,\n 'hb-input-number__increase--disabled': this.currentValue >= this.max,\n }}\n aria-label=\"增加\"\n aria-disabled={this.currentValue >= this.max || this.disabled}\n disabled={this.currentValue >= this.max || this.disabled}\n onClick={this.increase}\n >\n +\n </button>\n )}\n </div>\n );\n }\n}\n"]}
|
|
@@ -73,6 +73,17 @@
|
|
|
73
73
|
align-items: center;
|
|
74
74
|
justify-content: center;
|
|
75
75
|
transition: all 0.2s;
|
|
76
|
+
/* button 默认样式重置(A1:从 span 改为 button 后需要) */
|
|
77
|
+
padding: 0;
|
|
78
|
+
border: none;
|
|
79
|
+
font-family: inherit;
|
|
80
|
+
line-height: 1;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.hb-input-number__increase:focus-visible,
|
|
84
|
+
.hb-input-number__decrease:focus-visible {
|
|
85
|
+
outline: 2px solid var(--hb-color-primary, #409eff);
|
|
86
|
+
outline-offset: -2px;
|
|
76
87
|
}
|
|
77
88
|
|
|
78
89
|
.hb-input-number__increase:hover:not(.hb-input-number__increase--disabled),
|
|
@@ -165,4 +176,3 @@
|
|
|
165
176
|
.hb-input-number--disabled {
|
|
166
177
|
cursor: not-allowed;
|
|
167
178
|
}
|
|
168
|
-
|
|
@@ -117,7 +117,7 @@ export class InputTag {
|
|
|
117
117
|
this.hbChange.emit([]);
|
|
118
118
|
};
|
|
119
119
|
render() {
|
|
120
|
-
return (h("div", { key: '
|
|
120
|
+
return (h("div", { key: 'eb9c7afe898b95d3b08c068921f50b4848d78ada', class: {
|
|
121
121
|
'hb-input-tag': true,
|
|
122
122
|
[`hb-input-tag--${this.size}`]: true,
|
|
123
123
|
'hb-input-tag--disabled': this.disabled,
|
|
@@ -125,7 +125,7 @@ export class InputTag {
|
|
|
125
125
|
}, style: this.width ? { width: this.width } : undefined }, this.modelValue.map((tag) => (h("span", { class: {
|
|
126
126
|
'hb-input-tag__tag': true,
|
|
127
127
|
[`hb-input-tag__tag--${this.type}`]: !!this.type,
|
|
128
|
-
} }, h("span", { class: "hb-input-tag__tag-text" }, tag), this.closable && (h("span", { class: "hb-input-tag__tag-close", onClick: () => this.removeTag(tag) }, "\u00D7"))))), this.inputVisible && (!this.max || this.modelValue.length < this.max) && (h("input", { key: '
|
|
128
|
+
} }, h("span", { class: "hb-input-tag__tag-text" }, tag), this.closable && (h("span", { class: "hb-input-tag__tag-close", onClick: () => this.removeTag(tag) }, "\u00D7"))))), this.inputVisible && (!this.max || this.modelValue.length < this.max) && (h("input", { key: '4f26ff131300b6afbb6278a8066e33c16197990f', ref: (el) => (this.inputRef = el), type: "text", class: "hb-input-tag__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, maxlength: this.maxlength, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur })), this.clearable && this.modelValue.length > 0 && !this.disabled && (h("span", { key: '2d0156cd68a9d9a11e1e8b78160edfa271bcb188', class: "hb-input-tag__clear", onClick: this.handleClearAll }, "\u00D7"))));
|
|
129
129
|
}
|
|
130
130
|
static get is() { return "hb-input-tag"; }
|
|
131
131
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../src/components/Layout/Layout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/** 响应式栅格配置(对齐 antd:可传 number 或 {span,offset,push,pull}) */\nexport interface ColResponsive {\n span?: number;\n offset?: number;\n push?: number;\n pull?: number;\n}\n\n/**\n * Layout 布局组件\n * 通过基础的 24 分栏,迅速简便地创建布局。\n * 支持响应式:xs/sm/md/lg/xl 在对应断点应用各自的 span/offset/push/pull。\n */\n@Component({\n tag: 'hb-layout',\n styleUrl: 'layout.css',\n shadow: true,\n})\nexport class Layout {\n /**\n * 栅格占据的列数\n * @default 24\n */\n @Prop() span: number = 24;\n\n /**\n * 栅格左侧的间隔格数\n * @default 0\n */\n @Prop() offset: number = 0;\n\n /**\n * 栅格向右移动格数\n * @default 0\n */\n @Prop() push: number = 0;\n\n /**\n * 栅格向左移动格数\n * @default 0\n */\n @Prop() pull: number = 0;\n\n /**\n * <576px 响应式栅格数或者栅格属性对象\n */\n @Prop() xs?: number | ColResponsive;\n\n /**\n * ≥576px 响应式栅格数或者栅格属性对象\n */\n @Prop() sm?: number | ColResponsive;\n\n /**\n * ≥768px 响应式栅格数或者栅格属性对象\n */\n @Prop() md?: number | ColResponsive;\n\n /**\n * ≥992px 响应式栅格数或者栅格属性对象\n */\n @Prop() lg?: number | ColResponsive;\n\n /**\n * ≥1200px 响应式栅格数或者栅格属性对象\n */\n @Prop() xl?: number | ColResponsive;\n\n /** 把响应式 prop(number 或对象)规范化为 {span,offset,push,pull} */\n private normalizeResponsive(value: number | ColResponsive | undefined): ColResponsive {\n if (value === undefined || value === null) return {};\n if (typeof value === 'number') return { span: value };\n return value;\n }\n\n private getColClass() {\n const classes: string[] = ['hb-col'];\n\n // 基础(无断点)span/offset/push/pull —— 仅在没有 xs 时作为 xs 默认(antd 行为)\n if (this.span) classes.push(`hb-col-${this.span}`);\n if (this.offset) classes.push(`hb-col-offset-${this.offset}`);\n if (this.push) classes.push(`hb-col-push-${this.push}`);\n if (this.pull) classes.push(`hb-col-pull-${this.pull}`);\n\n // 响应式断点:生成 hb-col-{bp}-{span} / hb-col-{bp}-offset-{n} 等 class,\n // CSS 用 @media 在对应断点应用(覆盖基础值)。\n const bps: Array<'xs' | 'sm' | 'md' | 'lg' | 'xl'> = ['xs', 'sm', 'md', 'lg', 'xl'];\n for (const bp of bps) {\n const v = this[bp];\n if (v === undefined) continue;\n const r = this.normalizeResponsive(v);\n if (r.span !== undefined) classes.push(`hb-col-${bp}-${r.span}`);\n if (r.offset !== undefined) classes.push(`hb-col-${bp}-offset-${r.offset}`);\n if (r.push !== undefined) classes.push(`hb-col-${bp}-push-${r.push}`);\n if (r.pull !== undefined) classes.push(`hb-col-${bp}-pull-${r.pull}`);\n }\n\n return classes.join(' ');\n }\n\n render() {\n return (\n <div class={this.getColClass()}>\n <slot></slot>\n </div>\n );\n }\n}\n
|
|
1
|
+
{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../src/components/Layout/Layout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/** 响应式栅格配置(对齐 antd:可传 number 或 {span,offset,push,pull}) */\nexport interface ColResponsive {\n span?: number;\n offset?: number;\n push?: number;\n pull?: number;\n}\n\n/**\n * Layout 布局组件\n * 通过基础的 24 分栏,迅速简便地创建布局。\n * 支持响应式:xs/sm/md/lg/xl 在对应断点应用各自的 span/offset/push/pull。\n */\n@Component({\n tag: 'hb-layout',\n styleUrl: 'layout.css',\n shadow: true,\n})\nexport class Layout {\n /**\n * 栅格占据的列数\n * @default 24\n */\n @Prop() span: number = 24;\n\n /**\n * 栅格左侧的间隔格数\n * @default 0\n */\n @Prop() offset: number = 0;\n\n /**\n * 栅格向右移动格数\n * @default 0\n */\n @Prop() push: number = 0;\n\n /**\n * 栅格向左移动格数\n * @default 0\n */\n @Prop() pull: number = 0;\n\n /**\n * <576px 响应式栅格数或者栅格属性对象\n */\n @Prop() xs?: number | ColResponsive;\n\n /**\n * ≥576px 响应式栅格数或者栅格属性对象\n */\n @Prop() sm?: number | ColResponsive;\n\n /**\n * ≥768px 响应式栅格数或者栅格属性对象\n */\n @Prop() md?: number | ColResponsive;\n\n /**\n * ≥992px 响应式栅格数或者栅格属性对象\n */\n @Prop() lg?: number | ColResponsive;\n\n /**\n * ≥1200px 响应式栅格数或者栅格属性对象\n */\n @Prop() xl?: number | ColResponsive;\n\n /** 把响应式 prop(number 或对象)规范化为 {span,offset,push,pull} */\n private normalizeResponsive(value: number | ColResponsive | undefined): ColResponsive {\n if (value === undefined || value === null) return {};\n if (typeof value === 'number') return { span: value };\n return value;\n }\n\n private getColClass() {\n const classes: string[] = ['hb-col'];\n\n // 基础(无断点)span/offset/push/pull —— 仅在没有 xs 时作为 xs 默认(antd 行为)\n if (this.span) classes.push(`hb-col-${this.span}`);\n if (this.offset) classes.push(`hb-col-offset-${this.offset}`);\n if (this.push) classes.push(`hb-col-push-${this.push}`);\n if (this.pull) classes.push(`hb-col-pull-${this.pull}`);\n\n // 响应式断点:生成 hb-col-{bp}-{span} / hb-col-{bp}-offset-{n} 等 class,\n // CSS 用 @media 在对应断点应用(覆盖基础值)。\n const bps: Array<'xs' | 'sm' | 'md' | 'lg' | 'xl'> = ['xs', 'sm', 'md', 'lg', 'xl'];\n for (const bp of bps) {\n const v = this[bp];\n if (v === undefined) continue;\n const r = this.normalizeResponsive(v);\n if (r.span !== undefined) classes.push(`hb-col-${bp}-${r.span}`);\n if (r.offset !== undefined) classes.push(`hb-col-${bp}-offset-${r.offset}`);\n if (r.push !== undefined) classes.push(`hb-col-${bp}-push-${r.push}`);\n if (r.pull !== undefined) classes.push(`hb-col-${bp}-pull-${r.pull}`);\n }\n\n return classes.join(' ');\n }\n\n render() {\n return (\n <div class={this.getColClass()}>\n <slot></slot>\n </div>\n );\n }\n}\n"]}
|
|
@@ -34,13 +34,13 @@ export class Row {
|
|
|
34
34
|
render() {
|
|
35
35
|
const gutter = this.getGutterValue();
|
|
36
36
|
const Tag = this.tag;
|
|
37
|
-
return (h(Tag, { key: '
|
|
37
|
+
return (h(Tag, { key: '24c61b29b302f92a1f24ffe7e1efcc82e5f2694d', class: {
|
|
38
38
|
'hb-row': true,
|
|
39
39
|
[`hb-row--justify-${this.justify}`]: true,
|
|
40
40
|
[`hb-row--align-${this.align}`]: true,
|
|
41
41
|
}, style: {
|
|
42
42
|
'--hb-row-gutter': gutter ? `${gutter}px` : '0',
|
|
43
|
-
} }, h("slot", { key: '
|
|
43
|
+
} }, h("slot", { key: '2f5c9b147cafb4d408b7dfbab0dc7ca5141c97e5' })));
|
|
44
44
|
}
|
|
45
45
|
static get is() { return "hb-row"; }
|
|
46
46
|
static get encapsulation() { return "shadow"; }
|