fuma 1.0.15 → 1.0.17

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.
Files changed (118) hide show
  1. package/dist/private/Meta.svelte +27 -32
  2. package/dist/private/Meta.svelte.d.ts +0 -1
  3. package/dist/private/api.d.ts +1 -1
  4. package/dist/ui/badge/Badge.svelte +3 -4
  5. package/dist/ui/button/ButtonCopy.svelte +31 -37
  6. package/dist/ui/button/ButtonDelete.svelte +21 -23
  7. package/dist/ui/button/ButtonDelete.svelte.d.ts +0 -1
  8. package/dist/ui/card/Card.svelte +10 -13
  9. package/dist/ui/card/Card.svelte.d.ts +0 -1
  10. package/dist/ui/card/CardBasic.svelte +4 -5
  11. package/dist/ui/card/CardBasic.svelte.d.ts +0 -1
  12. package/dist/ui/card/CardCollapse.svelte +31 -35
  13. package/dist/ui/card/CardCollapse.svelte.d.ts +0 -1
  14. package/dist/ui/card/CardFullScreen.svelte +6 -8
  15. package/dist/ui/card/CardFullScreen.svelte.d.ts +0 -3
  16. package/dist/ui/card/CardLink.svelte +4 -5
  17. package/dist/ui/card/CardLink.svelte.d.ts +0 -1
  18. package/dist/ui/dialog/Dialog.svelte +34 -41
  19. package/dist/ui/dialog/Dialog.svelte.d.ts +0 -1
  20. package/dist/ui/dialog/DialogConfirm.svelte +4 -6
  21. package/dist/ui/dialog/DialogConfirm.svelte.d.ts +0 -1
  22. package/dist/ui/drawer/Drawer.svelte +37 -46
  23. package/dist/ui/drawer/Drawer.svelte.d.ts +0 -16
  24. package/dist/ui/form/Form.svelte +82 -100
  25. package/dist/ui/form/Form.svelte.d.ts +0 -1
  26. package/dist/ui/form/FormInput.svelte +6 -12
  27. package/dist/ui/form/FormInput.svelte.d.ts +0 -18
  28. package/dist/ui/form/FormSection.svelte +16 -23
  29. package/dist/ui/form/formInput.d.ts +0 -1
  30. package/dist/ui/icon/Icon.svelte +32 -35
  31. package/dist/ui/input/FormControl.svelte +32 -38
  32. package/dist/ui/input/FormControl.svelte.d.ts +0 -3
  33. package/dist/ui/input/InputBoolean.svelte +8 -13
  34. package/dist/ui/input/InputBoolean.svelte.d.ts +0 -3
  35. package/dist/ui/input/InputCheckboxs.svelte +20 -22
  36. package/dist/ui/input/InputCheckboxs.svelte.d.ts +0 -3
  37. package/dist/ui/input/InputCheckboxsMenu.svelte +35 -51
  38. package/dist/ui/input/InputCheckboxsMenu.svelte.d.ts +0 -3
  39. package/dist/ui/input/InputCheckboxsTree.svelte +6 -9
  40. package/dist/ui/input/InputCheckboxsTreeNodes.svelte +27 -35
  41. package/dist/ui/input/InputCombo.svelte +34 -43
  42. package/dist/ui/input/InputCombo.svelte.d.ts +0 -3
  43. package/dist/ui/input/InputDate.svelte +17 -22
  44. package/dist/ui/input/InputDateTime.svelte +18 -23
  45. package/dist/ui/input/InputImage.svelte +45 -52
  46. package/dist/ui/input/InputImage.svelte.d.ts +0 -1
  47. package/dist/ui/input/InputImagePreview.svelte +20 -24
  48. package/dist/ui/input/InputNumber.svelte +5 -10
  49. package/dist/ui/input/InputOptionInParam.svelte +10 -12
  50. package/dist/ui/input/InputOptions.svelte +34 -40
  51. package/dist/ui/input/InputPassword.svelte +5 -7
  52. package/dist/ui/input/InputPassword.svelte.d.ts +0 -3
  53. package/dist/ui/input/InputRadio.svelte +32 -36
  54. package/dist/ui/input/InputRadio.svelte.d.ts +0 -3
  55. package/dist/ui/input/InputRelation.svelte +67 -83
  56. package/dist/ui/input/InputRelation.svelte.d.ts +0 -1
  57. package/dist/ui/input/InputRelations.svelte +79 -92
  58. package/dist/ui/input/InputSearch.svelte +10 -13
  59. package/dist/ui/input/InputSelect.svelte +28 -39
  60. package/dist/ui/input/InputText.svelte +7 -8
  61. package/dist/ui/input/InputTextarea.svelte +6 -6
  62. package/dist/ui/input/InputTime.svelte +23 -29
  63. package/dist/ui/input/RelationAfter.svelte +9 -13
  64. package/dist/ui/input/SelectorList.svelte +12 -16
  65. package/dist/ui/input/SelectorList.svelte.d.ts +0 -4
  66. package/dist/ui/input/textRich/InputTextRich.svelte +50 -52
  67. package/dist/ui/input/textRich/InputTextRich.svelte.d.ts +9 -3
  68. package/dist/ui/input/textRich/SuggesionList.svelte +9 -13
  69. package/dist/ui/input/textRich/ToolMark.svelte +9 -12
  70. package/dist/ui/input/textRich/ToolMarkColor.svelte +11 -15
  71. package/dist/ui/input/textRich/ToolMarkLink.svelte +38 -46
  72. package/dist/ui/input/textRich/ToolMenu.svelte +19 -34
  73. package/dist/ui/input/textRich/ToolMenuAlign.svelte +9 -13
  74. package/dist/ui/input/textRich/ToolMenuInsert.svelte +7 -12
  75. package/dist/ui/input/textRich/ToolMenuNode.svelte +10 -14
  76. package/dist/ui/input/textRich/ToolsBar.svelte +11 -15
  77. package/dist/ui/login/Login.svelte +30 -36
  78. package/dist/ui/menu/ContextMenu.svelte +31 -37
  79. package/dist/ui/menu/ContextMenu.svelte.d.ts +0 -1
  80. package/dist/ui/menu/DropDown.svelte +83 -92
  81. package/dist/ui/menu/DropDown.svelte.d.ts +0 -1
  82. package/dist/ui/menu/DropDownMenu.svelte +18 -25
  83. package/dist/ui/menu/DropDownMenu.svelte.d.ts +0 -1
  84. package/dist/ui/mode/ToggleMode.svelte +14 -15
  85. package/dist/ui/mode/ToggleMode.svelte.d.ts +1 -6
  86. package/dist/ui/pagination/Pagination.svelte +8 -9
  87. package/dist/ui/placeholder/Placeholder.svelte +3 -4
  88. package/dist/ui/placeholder/Placeholder.svelte.d.ts +0 -1
  89. package/dist/ui/placeholder/PlaceholderImage.svelte +4 -6
  90. package/dist/ui/placeholder/PlaceholderImage.svelte.d.ts +0 -1
  91. package/dist/ui/range/RangePicker.svelte +62 -75
  92. package/dist/ui/range/RangePicker.svelte.d.ts +2 -2
  93. package/dist/ui/range/RangePickerButton.svelte +35 -43
  94. package/dist/ui/slot/Slot.svelte +25 -42
  95. package/dist/ui/slot/Span.svelte +1 -2
  96. package/dist/ui/table/Table.svelte +28 -35
  97. package/dist/ui/table/TableBody.svelte +12 -18
  98. package/dist/ui/table/TableCell.svelte +10 -13
  99. package/dist/ui/table/TableFieldsEdition.svelte +51 -57
  100. package/dist/ui/table/TableHead.svelte +20 -19
  101. package/dist/ui/table/TableViewSelect.svelte +37 -50
  102. package/dist/ui/table/cell/TableCellArray.svelte +3 -5
  103. package/dist/ui/table/cell/TableCellBoolean.svelte +3 -4
  104. package/dist/ui/table/cell/TableCellNumber.svelte +1 -2
  105. package/dist/ui/table/cell/TableCellString.svelte +2 -5
  106. package/dist/ui/table/head/OrderButtons.svelte +37 -0
  107. package/dist/ui/table/head/OrderButtons.svelte.d.ts +20 -0
  108. package/dist/ui/table/head/TableHeadBoolean.svelte +3 -6
  109. package/dist/ui/table/head/TableHeadDate.svelte +110 -61
  110. package/dist/ui/table/head/TableHeadDefault.svelte +2 -5
  111. package/dist/ui/table/head/TableHeadNumber.svelte +76 -67
  112. package/dist/ui/table/head/TableHeadSelect.svelte +41 -47
  113. package/dist/ui/table/head/TableHeadString.svelte +8 -14
  114. package/dist/ui/tabs/Tabs.svelte +5 -8
  115. package/dist/ui/tabs/TabsIcon.svelte +28 -31
  116. package/dist/validation/zod.d.ts +12 -0
  117. package/dist/validation/zod.js +4 -2
  118. package/package.json +1 -1
@@ -1,54 +1,38 @@
1
- <script lang="ts">
2
- import { goto } from '$app/navigation'
3
- import { page } from '$app/stores'
4
- import { mdiClose } from '@mdi/js'
5
-
6
- import { urlParam } from '../../store/index.js'
7
- import { jsonParse, type Options, parseOptions } from '../../utils/index.js'
8
- import { Icon } from '../icon/index.js'
9
- import { DropDown } from '../menu/index.js'
10
- import { FormControl, type InputProps } from './index.js'
11
-
12
- type $$Props = InputProps<string[]> & {
13
- key: string
14
- options: Options
15
- right?: boolean
16
- btnClass?: string
17
- badgePrimary?: boolean
18
- }
19
- $: ({
20
- input,
21
- value: _value,
22
- options: _1,
23
- class: klass,
24
- label,
25
- right,
26
- btnClass,
27
- badgePrimary,
28
- ...props
29
- } = $$props as $$Props)
30
-
31
- export let key: string
32
- export let options: Options
33
- export let value: string[] | null | undefined =
34
- _value || jsonParse($page.url.searchParams.get(key), [])
35
-
36
- let dropdown: DropDown
37
-
38
- $: _options = parseOptions(options)
39
-
40
- async function writeUrl() {
41
- const url = value?.length
42
- ? $urlParam.with({ [key]: JSON.stringify(value) })
43
- : $urlParam.without(key)
44
- return goto(url, { replaceState: true, noScroll: true })
45
- }
46
-
47
- function handleReset() {
48
- dropdown.hide()
49
- value = []
50
- goto($urlParam.without(key), { replaceState: true })
51
- }
1
+ <script>import { goto } from "$app/navigation";
2
+ import { page } from "$app/stores";
3
+ import { mdiClose } from "@mdi/js";
4
+ import { urlParam } from "../../store/index.js";
5
+ import { jsonParse, parseOptions } from "../../utils/index.js";
6
+ import { Icon } from "../icon/index.js";
7
+ import { DropDown } from "../menu/index.js";
8
+ import { FormControl } from "./index.js";
9
+ $:
10
+ ({
11
+ input,
12
+ value: _value,
13
+ options: _1,
14
+ class: klass,
15
+ label,
16
+ right,
17
+ btnClass,
18
+ badgePrimary,
19
+ ...props
20
+ } = $$props);
21
+ export let key;
22
+ export let options;
23
+ export let value = _value || jsonParse($page.url.searchParams.get(key), []);
24
+ let dropdown;
25
+ $:
26
+ _options = parseOptions(options);
27
+ async function writeUrl() {
28
+ const url = value?.length ? $urlParam.with({ [key]: JSON.stringify(value) }) : $urlParam.without(key);
29
+ return goto(url, { replaceState: true, noScroll: true });
30
+ }
31
+ function handleReset() {
32
+ dropdown.hide();
33
+ value = [];
34
+ goto($urlParam.without(key), { replaceState: true });
35
+ }
52
36
  </script>
53
37
 
54
38
  <input type="hidden" name={key} value={JSON.stringify(value)} />
@@ -12,9 +12,6 @@ declare const __propDef: {
12
12
  prefixFor?: string | number | undefined;
13
13
  enhanceDisabled?: boolean | undefined;
14
14
  labelPosition?: ("top" | "left" | "right") | undefined;
15
- children?: import("svelte").Snippet<[{
16
- key: string;
17
- }]> | undefined;
18
15
  } & {
19
16
  input?: import("svelte/elements.js").HTMLInputAttributes | undefined;
20
17
  inputElement?: HTMLInputElement | undefined;
@@ -1,12 +1,9 @@
1
- <script lang="ts">
2
- import InputCheckboxsTreeNodes, {
3
- type OptionsNode
4
- } from './InputCheckboxsTreeNodes.svelte'
5
-
6
- export let label: string
7
- export let options: OptionsNode
8
- let klass = ''
9
- export { klass as class }
1
+ <script>import InputCheckboxsTreeNodes, {
2
+ } from "./InputCheckboxsTreeNodes.svelte";
3
+ export let label;
4
+ export let options;
5
+ let klass = "";
6
+ export { klass as class };
10
7
  </script>
11
8
 
12
9
  <div class={klass}>
@@ -1,39 +1,31 @@
1
- <script lang="ts" context="module">
2
- export type OptionsNode = Record<
3
- string,
4
- { label: string; value?: boolean; options?: OptionsNode }
5
- >
6
- </script>
7
-
8
- <script lang="ts">
9
- import { createEventDispatcher } from 'svelte'
10
- import { InputBoolean } from './index.js'
11
- export let options: OptionsNode
12
-
13
- type Events = { setTrue: void }
14
- const dispatch = createEventDispatcher<Events>()
15
-
16
- function handleChange(newValue: boolean, option: OptionsNode[string]) {
17
- if (newValue === true) dispatch('setTrue')
18
- else if (option.options) {
19
- option.options = setFalse(option.options)
20
- }
21
- }
1
+ <script context="module"></script>
22
2
 
23
- function setFalse(_options?: OptionsNode): OptionsNode | undefined {
24
- if (!_options) return undefined
25
- return Object.entries(_options).reduce<OptionsNode>(
26
- (acc, [key, opt]) => ({
27
- ...acc,
28
- [key]: {
29
- label: opt.label,
30
- value: false,
31
- options: setFalse(opt.options)
32
- }
33
- }),
34
- {}
35
- )
36
- }
3
+ <script>import { createEventDispatcher } from "svelte";
4
+ import { InputBoolean } from "./index.js";
5
+ export let options;
6
+ const dispatch = createEventDispatcher();
7
+ function handleChange(newValue, option) {
8
+ if (newValue === true)
9
+ dispatch("setTrue");
10
+ else if (option.options) {
11
+ option.options = setFalse(option.options);
12
+ }
13
+ }
14
+ function setFalse(_options) {
15
+ if (!_options)
16
+ return void 0;
17
+ return Object.entries(_options).reduce(
18
+ (acc, [key, opt]) => ({
19
+ ...acc,
20
+ [key]: {
21
+ label: opt.label,
22
+ value: false,
23
+ options: setFalse(opt.options)
24
+ }
25
+ }),
26
+ {}
27
+ );
28
+ }
37
29
  </script>
38
30
 
39
31
  {#each Object.keys(options) as key (key)}
@@ -1,46 +1,37 @@
1
- <script lang="ts">
2
- import { createEventDispatcher, tick } from 'svelte'
3
-
4
- import type { InputProps } from './types.js'
5
- import type { TippyProps } from '../../utils/tippy.js'
6
- import { type Options, type Option, parseOptions } from '../../utils/options.js'
7
- import { FormControl, SelectorList } from './index.js'
8
- import { DropDown } from '../menu/index.js'
9
- import { Icon } from '../icon/index.js'
10
-
11
- type $$Props = InputProps & { options: Options; tippyProps?: TippyProps }
12
- $: ({ input, value: _value, options, tippyProps, ...props } = $$props as $$Props)
13
- $: ({ class: inputClass, ...inputProps } = input || {})
14
- export let value = _value
15
- export let inputElement: HTMLInputElement | undefined = undefined
16
-
17
- let focusIndex = 0
18
- let searchValue = ''
19
-
20
- const dispatch = createEventDispatcher<{ input: string }>()
21
- let filteredOptions: (Option & { id: string })[] = []
22
- $: _options = parseOptions(options)
23
- $: selectedOption = _options.find((opt) => opt.value === value)
24
-
25
- function filterOptions(value: string) {
26
- const reg = new RegExp(value, 'i')
27
- filteredOptions = _options
28
- .filter((opt) => opt.label.match(reg) || opt.value.match(reg))
29
- .map((opt) => ({ id: opt.value, ...opt }))
30
- }
31
-
32
- export async function clear() {
33
- searchValue = ''
34
- value = ''
35
- filterOptions('')
36
- await tick()
37
- inputElement?.focus()
38
- }
39
-
40
- async function select(index = focusIndex) {
41
- value = _options[index].value
42
- dispatch('input', value)
43
- }
1
+ <script>import { createEventDispatcher, tick } from "svelte";
2
+ import { parseOptions } from "../../utils/options.js";
3
+ import { FormControl, SelectorList } from "./index.js";
4
+ import { DropDown } from "../menu/index.js";
5
+ import { Icon } from "../icon/index.js";
6
+ $:
7
+ ({ input, value: _value, options, tippyProps, ...props } = $$props);
8
+ $:
9
+ ({ class: inputClass, ...inputProps } = input || {});
10
+ export let value = _value;
11
+ export let inputElement = void 0;
12
+ let focusIndex = 0;
13
+ let searchValue = "";
14
+ const dispatch = createEventDispatcher();
15
+ let filteredOptions = [];
16
+ $:
17
+ _options = parseOptions(options);
18
+ $:
19
+ selectedOption = _options.find((opt) => opt.value === value);
20
+ function filterOptions(value2) {
21
+ const reg = new RegExp(value2, "i");
22
+ filteredOptions = _options.filter((opt) => opt.label.match(reg) || opt.value.match(reg)).map((opt) => ({ id: opt.value, ...opt }));
23
+ }
24
+ export async function clear() {
25
+ searchValue = "";
26
+ value = "";
27
+ filterOptions("");
28
+ await tick();
29
+ inputElement?.focus();
30
+ }
31
+ async function select(index = focusIndex) {
32
+ value = _options[index].value;
33
+ dispatch("input", value);
34
+ }
44
35
  </script>
45
36
 
46
37
  <DropDown {tippyProps}>
@@ -15,9 +15,6 @@ declare const __propDef: {
15
15
  prefixFor?: string | number | undefined;
16
16
  enhanceDisabled?: boolean | undefined;
17
17
  labelPosition?: ("top" | "left" | "right") | undefined;
18
- children?: import("svelte").Snippet<[{
19
- key: string;
20
- }]> | undefined;
21
18
  } & {
22
19
  input?: import("svelte/elements").HTMLInputAttributes | undefined;
23
20
  inputElement?: HTMLInputElement | undefined;
@@ -1,25 +1,20 @@
1
- <script lang="ts">
2
- import { createEventDispatcher } from 'svelte'
3
- import type { FormEventHandler, HTMLInputAttributes } from 'svelte/elements'
4
- import dayjs from 'dayjs'
5
-
6
- import { FormControl, type InputProps } from './index.js'
7
- import { USE_COERCE_DATE } from '../../utils/constant.js'
8
-
9
- type $$Props = InputProps<Date | null | undefined>
10
- export let value: Date | null | undefined = undefined
11
- export let input: HTMLInputAttributes = {}
12
- $: ({ class: inputClass = '', ...inputProps } = input)
13
-
14
- const dispatch = createEventDispatcher<{ input: Date | null }>()
15
-
16
- const handleInput: FormEventHandler<HTMLInputElement> = ({ currentTarget }) => {
17
- const newValue = currentTarget.valueAsDate
18
- if (newValue === null) value = null
19
- newValue?.setHours(value?.getHours() || 0, value?.getMinutes() || 0, value?.getSeconds() || 0)
20
- value = newValue
21
- dispatch('input', value)
22
- }
1
+ <script>import { createEventDispatcher } from "svelte";
2
+ import dayjs from "dayjs";
3
+ import { FormControl } from "./index.js";
4
+ import { USE_COERCE_DATE } from "../../utils/constant.js";
5
+ export let value = void 0;
6
+ export let input = {};
7
+ $:
8
+ ({ class: inputClass = "", ...inputProps } = input);
9
+ const dispatch = createEventDispatcher();
10
+ const handleInput = ({ currentTarget }) => {
11
+ const newValue = currentTarget.valueAsDate;
12
+ if (newValue === null)
13
+ value = null;
14
+ newValue?.setHours(value?.getHours() || 0, value?.getMinutes() || 0, value?.getSeconds() || 0);
15
+ value = newValue;
16
+ dispatch("input", value);
17
+ };
23
18
  </script>
24
19
 
25
20
  <FormControl {...$$restProps} let:key>
@@ -1,26 +1,21 @@
1
- <script lang="ts">
2
- import type { FormEventHandler, HTMLInputAttributes } from 'svelte/elements'
3
- import { USE_COERCE_DATE } from '../../utils/constant.js'
4
- import { FormControl, type InputProps } from './index.js'
5
- import { createEventDispatcher } from 'svelte'
6
- import dayjs from 'dayjs'
7
-
8
- type $$Props = InputProps<Date | null | undefined>
9
- export let value: Date | null | undefined = undefined
10
- export let input: HTMLInputAttributes = {}
11
- $: ({ class: inputClass = '', ...inputProps } = input)
12
-
13
- const dispatch = createEventDispatcher<{ input: Date | null }>()
14
-
15
- const handleInput: FormEventHandler<HTMLInputElement> = ({ currentTarget }) => {
16
- value = getDateTime(currentTarget.value)
17
- dispatch('input', value)
18
- }
19
-
20
- function getDateTime(v: string | null | undefined): Date | null {
21
- if (typeof v !== 'string') return null
22
- return new Date(v)
23
- }
1
+ <script>import { USE_COERCE_DATE } from "../../utils/constant.js";
2
+ import { FormControl } from "./index.js";
3
+ import { createEventDispatcher } from "svelte";
4
+ import dayjs from "dayjs";
5
+ export let value = void 0;
6
+ export let input = {};
7
+ $:
8
+ ({ class: inputClass = "", ...inputProps } = input);
9
+ const dispatch = createEventDispatcher();
10
+ const handleInput = ({ currentTarget }) => {
11
+ value = getDateTime(currentTarget.value);
12
+ dispatch("input", value);
13
+ };
14
+ function getDateTime(v) {
15
+ if (typeof v !== "string")
16
+ return null;
17
+ return new Date(v);
18
+ }
24
19
  </script>
25
20
 
26
21
  <FormControl {...$$restProps} let:key>
@@ -1,56 +1,49 @@
1
- <script lang="ts" context="module">
2
- export type Crop = { width: number; height: number; x: number; y: number }
3
- </script>
4
-
5
- <script lang="ts">
6
- import { onMount, createEventDispatcher } from 'svelte'
7
- import Cropper from 'svelte-easy-crop'
8
- import { mdiTrayArrowUp } from '@mdi/js'
9
-
10
- import type { TippyInstance } from '../../utils/tippy.js'
11
- import { Icon } from '../icon/index.js'
12
- import { DropDown } from '../menu/index.js'
13
- import { Dialog } from '../dialog/index.js'
14
-
15
- export let aspect = 1
16
- export let title = 'Image'
17
- export let formaction: string | undefined = undefined
18
- export let key = ''
19
- let dialog: HTMLDialogElement
20
- let tip: TippyInstance
21
- let image = ''
22
- let crop: Crop | undefined = undefined
23
- let inputFile: HTMLInputElement
24
-
25
- const dispatch = createEventDispatcher<{ submit: { crop: Crop; image: string } }>()
26
-
27
- function onFileSelected() {
28
- if (!inputFile.files) return
29
- const file = inputFile.files[0]
30
- const reader = new FileReader()
31
- reader.onload = ({ target }) => {
32
- image = (target?.result || '') as string
33
- dialog?.showModal()
34
- }
35
- reader.readAsDataURL(file)
36
- }
37
-
38
- export function close() {
39
- tip?.hide()
40
- dialog?.close()
41
- }
42
-
43
- onMount(() => {
44
- if (!$$slots.actions) tip.disable()
45
- })
46
- function handleClickActivator() {
47
- if (!$$slots.actions) inputFile.click()
48
- }
1
+ <script context="module"></script>
49
2
 
50
- function handleValidation() {
51
- close()
52
- if (crop && image) dispatch('submit', { crop, image })
53
- }
3
+ <script>import { onMount, createEventDispatcher } from "svelte";
4
+ import Cropper from "svelte-easy-crop";
5
+ import { mdiTrayArrowUp } from "@mdi/js";
6
+ import { Icon } from "../icon/index.js";
7
+ import { DropDown } from "../menu/index.js";
8
+ import { Dialog } from "../dialog/index.js";
9
+ export let aspect = 1;
10
+ export let title = "Image";
11
+ export let formaction = void 0;
12
+ export let key = "";
13
+ let dialog;
14
+ let tip;
15
+ let image = "";
16
+ let crop = void 0;
17
+ let inputFile;
18
+ const dispatch = createEventDispatcher();
19
+ function onFileSelected() {
20
+ if (!inputFile.files)
21
+ return;
22
+ const file = inputFile.files[0];
23
+ const reader = new FileReader();
24
+ reader.onload = ({ target }) => {
25
+ image = target?.result || "";
26
+ dialog?.showModal();
27
+ };
28
+ reader.readAsDataURL(file);
29
+ }
30
+ export function close() {
31
+ tip?.hide();
32
+ dialog?.close();
33
+ }
34
+ onMount(() => {
35
+ if (!$$slots.actions)
36
+ tip.disable();
37
+ });
38
+ function handleClickActivator() {
39
+ if (!$$slots.actions)
40
+ inputFile.click();
41
+ }
42
+ function handleValidation() {
43
+ close();
44
+ if (crop && image)
45
+ dispatch("submit", { crop, image });
46
+ }
54
47
  </script>
55
48
 
56
49
  <DropDown tippyProps={{ arrow: true }} hideOnBlur bind:tip>
@@ -12,7 +12,6 @@ declare const __propDef: {
12
12
  formaction?: string | undefined;
13
13
  key?: string | undefined;
14
14
  close?: (() => void) | undefined;
15
- children?: import("svelte").Snippet<[]> | undefined;
16
15
  };
17
16
  events: {
18
17
  submit: CustomEvent<{
@@ -1,27 +1,23 @@
1
- <script lang="ts">
2
- import { InputImage, type Crop } from './index.js'
3
- import { PlaceholderImage } from '../placeholder/index.js'
4
-
5
- export let key = ''
6
- export let src = ''
7
- export let alt = ''
8
- let klass = ''
9
- export { klass as class }
10
- export let title = 'Image'
11
- export let x: number
12
- export let y: number
13
- export let aspect = x / y
14
-
15
- let crop: Crop | null = null
16
- let image = ''
17
- let scale = 0
18
- let preview: HTMLImageElement
19
-
20
- async function handleSubmit(detail: { crop: Crop; image: string }) {
21
- crop = detail.crop
22
- image = detail.image
23
- scale = x / crop.width
24
- }
1
+ <script>import { InputImage } from "./index.js";
2
+ import { PlaceholderImage } from "../placeholder/index.js";
3
+ export let key = "";
4
+ export let src = "";
5
+ export let alt = "";
6
+ let klass = "";
7
+ export { klass as class };
8
+ export let title = "Image";
9
+ export let x;
10
+ export let y;
11
+ export let aspect = x / y;
12
+ let crop = null;
13
+ let image = "";
14
+ let scale = 0;
15
+ let preview;
16
+ async function handleSubmit(detail) {
17
+ crop = detail.crop;
18
+ image = detail.image;
19
+ scale = x / crop.width;
20
+ }
25
21
  </script>
26
22
 
27
23
  <InputImage {key} {title} {aspect} on:submit={({ detail }) => handleSubmit(detail)}>
@@ -1,13 +1,8 @@
1
- <script lang="ts">
2
- import { USE_COERCE_NUMBER } from '../../utils/constant.js'
3
- import { FormControl, type InputProps } from './index.js'
4
- import type { HTMLInputAttributes } from 'svelte/elements'
5
-
6
- type $$Props = InputProps<number>
7
-
8
- export let value: number | null | undefined = undefined
9
- export let input: HTMLInputAttributes | undefined = undefined
10
- export let inputElement: HTMLInputElement | undefined = undefined
1
+ <script>import { USE_COERCE_NUMBER } from "../../utils/constant.js";
2
+ import { FormControl } from "./index.js";
3
+ export let value = void 0;
4
+ export let input = void 0;
5
+ export let inputElement = void 0;
11
6
  </script>
12
7
 
13
8
  <FormControl {...$$restProps} let:key>
@@ -1,15 +1,13 @@
1
- <script lang="ts">
2
- import { Icon } from '../icon/index.js'
3
- import { parseOptions, type Options } from '../../utils/options.js'
4
- import { urlParam } from '../../store/param.js'
5
-
6
- let klass = ''
7
- export { klass as class }
8
- export let key: string
9
- export let options: Options
10
- export let removeKeys: string[] = []
11
-
12
- $: _options = parseOptions(options)
1
+ <script>import { Icon } from "../icon/index.js";
2
+ import { parseOptions } from "../../utils/options.js";
3
+ import { urlParam } from "../../store/param.js";
4
+ let klass = "";
5
+ export { klass as class };
6
+ export let key;
7
+ export let options;
8
+ export let removeKeys = [];
9
+ $:
10
+ _options = parseOptions(options);
13
11
  </script>
14
12
 
15
13
  <div class="join {klass}">