@raxium/vue 0.2.1 → 0.2.3

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 (6) hide show
  1. package/dist/components/input/Input.js +54 -49
  2. package/dist/components/input/Input.vue.d.ts +26 -10
  3. package/dist/components/input/props.d.ts +3 -4
  4. package/dist/components/number-input/NumberInput.js +13 -3
  5. package/dist/components/number-input/NumberInput.vue.d.ts +4 -0
  6. package/package.json +5 -5
package/dist/components/input/Input.js CHANGED
@@ -1,16 +1,14 @@
1
- import { computed, createBlock, createCommentVNode, createElementVNode, createPropsRestProxy, createVNode, defineComponent, isRef, normalizeClass, openBlock, ref, renderSlot, unref, useId, useTemplateRef, vModelText, withCtx, withDirectives, withModifiers } from "vue";
1
+ import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderSlot, unref, useId, useTemplateRef, vModelDynamic, watch, withCtx, withDirectives, withModifiers } from "vue";
2
2
  import { ark } from "@ark-ui/vue/factory";
3
3
  import { clsx } from "@raxium/themes/utils";
4
4
  import { useTheme } from "../../composables/useTheme.js";
5
- import { useVModel } from "@vueuse/core";
6
5
  import { CircleX } from "lucide-vue-next";
7
6
  const _hoisted_1 = [
8
7
  "id",
9
- "placeholder",
10
8
  "data-state",
9
+ "placeholder",
11
10
  "disabled",
12
- "readonly",
13
- "maxlength"
11
+ "readonly"
14
12
  ];
15
13
  const _sfc_main = /* @__PURE__ */ defineComponent({
16
14
  __name: "Input",
@@ -27,7 +25,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
27
25
  Array
28
26
  ]
29
27
  },
30
- placeholder: {},
31
28
  clearable: {
32
29
  type: Boolean,
33
30
  default: false
@@ -38,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
38
35
  readonly: {
39
36
  type: Boolean
40
37
  },
41
- maxlength: {},
38
+ placeholder: {},
42
39
  ui: {},
43
40
  theme: {}
44
41
  },
@@ -46,27 +43,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
46
43
  "update:modelValue",
47
44
  "focus",
48
45
  "blur",
46
+ "focusin",
47
+ "focusout",
49
48
  "input",
50
- "change"
49
+ "change",
50
+ "clear",
51
+ "beforeInput",
52
+ "compositionStart",
53
+ "compositionEnd",
54
+ "keydown",
55
+ "keyup"
51
56
  ],
52
57
  setup (__props, { emit: __emit }) {
53
- const props = createPropsRestProxy(__props, [
54
- "id",
55
- "class",
56
- "theme",
57
- "clearable",
58
- "ui",
59
- "disabled",
60
- "readonly",
61
- "defaultValue",
62
- "placeholder",
63
- "maxlength"
64
- ]);
65
58
  const emits = __emit;
66
59
  const inputId = useId();
67
- const modelValue = useVModel(props, "modelValue", emits, {
68
- passive: true,
69
- defaultValue: __props.defaultValue
60
+ const innerValue = ref(__props.modelValue ?? __props.defaultValue ?? "");
61
+ watch(innerValue, (newVal)=>{
62
+ emits("update:modelValue", newVal);
63
+ }, {
64
+ flush: "post"
70
65
  });
71
66
  const isFocus = ref(false);
72
67
  const inputState = computed(()=>{
@@ -76,8 +71,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
76
71
  });
77
72
  const inputRef = useTemplateRef("input");
78
73
  const rejectBlur = ref(false);
79
- function onBlur(event) {
74
+ function onFocusin(event) {
75
+ isFocus.value = true;
76
+ emits("focusin", event);
77
+ emits("focus", event);
78
+ }
79
+ function onFocusout(event) {
80
80
  setTimeout(()=>{
81
+ emits("focusout", event);
81
82
  emits("blur", event);
82
83
  if (rejectBlur.value) {
83
84
  rejectBlur.value = false;
@@ -86,6 +87,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
86
87
  isFocus.value = false;
87
88
  });
88
89
  }
90
+ function onClear() {
91
+ rejectBlur.value = true;
92
+ inputRef.value?.focus();
93
+ innerValue.value = void 0;
94
+ emits("clear", new CustomEvent("clear"), innerValue.value);
95
+ }
89
96
  const theme = useTheme(()=>__props.theme);
90
97
  const crafts = computed(()=>theme.value.crafts.tvInput());
91
98
  return (_ctx, _cache)=>(openBlock(), createBlock(unref(ark).div, {
@@ -98,45 +105,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
98
105
  }, {
99
106
  default: withCtx(()=>[
100
107
  renderSlot(_ctx.$slots, "prefix"),
101
- withDirectives(createElementVNode("input", {
102
- id: __props.id ?? unref(inputId),
103
- ref: "input",
104
- "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event)=>isRef(modelValue) ? modelValue.value = $event : null),
105
- class: normalizeClass(crafts.value.input({
108
+ withDirectives(createElementVNode("input", mergeProps({
109
+ id: __props.id ?? `input:${unref(inputId)}`,
110
+ ref: "input"
111
+ }, _ctx.$attrs, {
112
+ "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event)=>innerValue.value = $event),
113
+ class: crafts.value.input({
106
114
  class: unref(clsx)(__props.ui?.input),
107
115
  ...unref(theme)
108
- })),
109
- placeholder: __props.placeholder,
116
+ }),
110
117
  "data-state": inputState.value,
118
+ placeholder: __props.placeholder,
111
119
  disabled: __props.disabled ? true : void 0,
112
120
  readonly: __props.readonly ? true : void 0,
113
- maxlength: __props.maxlength,
114
- onFocus: _cache[1] || (_cache[1] = (event)=>{
115
- isFocus.value = true;
116
- emits("focus", event);
117
- }),
118
- onBlur,
119
- onInput: _cache[2] || (_cache[2] = (e)=>emits("input", e, unref(modelValue))),
120
- onChange: _cache[3] || (_cache[3] = (e)=>emits("change", e, unref(modelValue)))
121
- }, null, 42, _hoisted_1), [
121
+ onFocusin,
122
+ onFocusout,
123
+ onInput: _cache[1] || (_cache[1] = ($event)=>emits("input", $event, innerValue.value)),
124
+ onChange: _cache[2] || (_cache[2] = ($event)=>emits("change", $event, innerValue.value)),
125
+ onBeforeinput: _cache[3] || (_cache[3] = ($event)=>emits("beforeInput", $event, innerValue.value)),
126
+ onCompositionstart: _cache[4] || (_cache[4] = ($event)=>emits("compositionStart", $event)),
127
+ onCompositionend: _cache[5] || (_cache[5] = ($event)=>emits("compositionEnd", $event)),
128
+ onKeydown: _cache[6] || (_cache[6] = ($event)=>emits("keydown", $event)),
129
+ onKeyup: _cache[7] || (_cache[7] = ($event)=>emits("keyup", $event))
130
+ }), null, 16, _hoisted_1), [
122
131
  [
123
- vModelText,
124
- unref(modelValue)
132
+ vModelDynamic,
133
+ innerValue.value
125
134
  ]
126
135
  ]),
127
- "focused" === inputState.value && __props.clearable && unref(modelValue) ? (openBlock(), createBlock(unref(ark).div, {
136
+ "focused" === inputState.value && __props.clearable && __props.modelValue ? (openBlock(), createBlock(unref(ark).div, {
128
137
  key: 0,
129
138
  class: normalizeClass(crafts.value.clearable({
130
139
  class: unref(clsx)(__props.ui?.clearable),
131
140
  ...unref(theme)
132
141
  })),
133
- onMousedown: _cache[4] || (_cache[4] = withModifiers(()=>{
134
- rejectBlur.value = true;
135
- inputRef.value?.focus();
136
- modelValue.value = "";
137
- }, [
142
+ onMousedown: withModifiers(onClear, [
138
143
  "stop"
139
- ]))
144
+ ])
140
145
  }, {
141
146
  default: withCtx(()=>[
142
147
  createVNode(unref(CircleX))
package/dist/components/input/Input.vue.d.ts CHANGED
@@ -6,17 +6,33 @@ type __VLS_Slots = {} & {
6
6
  suffix?: (props: typeof __VLS_23) => any;
7
7
  };
8
8
  declare const __VLS_base: import("vue").DefineComponent<InputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
9
- input: (e: Event, value: string | number | undefined) => any;
10
- blur: (e: Event) => any;
11
- change: (e: Event, value: string | number | undefined) => any;
12
- focus: (e: Event) => any;
13
- "update:modelValue": (value: string | number) => any;
9
+ input: (e: InputEvent, value: string | undefined) => any;
10
+ blur: (e: FocusEvent) => any;
11
+ change: (e: Event, value: string | undefined) => any;
12
+ focus: (e: FocusEvent) => any;
13
+ focusin: (e: FocusEvent) => any;
14
+ focusout: (e: FocusEvent) => any;
15
+ keydown: (e: KeyboardEvent) => any;
16
+ keyup: (e: KeyboardEvent) => any;
17
+ clear: (e: Event, value: string | undefined) => any;
18
+ "update:modelValue": (value: string | undefined) => any;
19
+ beforeInput: (e: InputEvent, value: string | undefined) => any;
20
+ compositionStart: (e: CompositionEvent) => any;
21
+ compositionEnd: (e: CompositionEvent) => any;
14
22
  }, string, import("vue").PublicProps, Readonly<InputProps> & Readonly<{
15
- onInput?: ((e: Event, value: string | number | undefined) => any) | undefined;
16
- onBlur?: ((e: Event) => any) | undefined;
17
- onChange?: ((e: Event, value: string | number | undefined) => any) | undefined;
18
- onFocus?: ((e: Event) => any) | undefined;
19
- "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
23
+ onInput?: ((e: InputEvent, value: string | undefined) => any) | undefined;
24
+ onBlur?: ((e: FocusEvent) => any) | undefined;
25
+ onChange?: ((e: Event, value: string | undefined) => any) | undefined;
26
+ onFocus?: ((e: FocusEvent) => any) | undefined;
27
+ onFocusin?: ((e: FocusEvent) => any) | undefined;
28
+ onFocusout?: ((e: FocusEvent) => any) | undefined;
29
+ onKeydown?: ((e: KeyboardEvent) => any) | undefined;
30
+ onKeyup?: ((e: KeyboardEvent) => any) | undefined;
31
+ onClear?: ((e: Event, value: string | undefined) => any) | undefined;
32
+ "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
33
+ onBeforeInput?: ((e: InputEvent, value: string | undefined) => any) | undefined;
34
+ onCompositionStart?: ((e: CompositionEvent) => any) | undefined;
35
+ onCompositionEnd?: ((e: CompositionEvent) => any) | undefined;
20
36
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
21
37
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
22
38
  declare const _default: typeof __VLS_export;
package/dist/components/input/props.d.ts CHANGED
@@ -2,14 +2,13 @@ import type { ThemeCrafts } from '../../providers';
2
2
  import type { HTMLAttributes } from 'vue';
3
3
  export interface InputProps extends ThemeCrafts<'tvInput'> {
4
4
  id?: string;
5
- defaultValue?: string | number;
6
- modelValue?: string | number;
5
+ defaultValue?: string;
6
+ modelValue?: string;
7
7
  class?: HTMLAttributes['class'];
8
- placeholder?: string;
9
8
  clearable?: boolean;
10
9
  disabled?: boolean;
11
10
  readonly?: boolean;
12
- maxlength?: number;
11
+ placeholder?: string;
13
12
  ui?: {
14
13
  root?: HTMLAttributes['class'];
15
14
  input?: HTMLAttributes['class'];
package/dist/components/number-input/NumberInput.js CHANGED
@@ -73,7 +73,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
73
73
  "valueInvalid",
74
74
  "update:modelValue",
75
75
  "focus",
76
- "blur"
76
+ "blur",
77
+ "focusin",
78
+ "focusout"
77
79
  ],
78
80
  setup (__props, { expose: __expose, emit: __emit }) {
79
81
  const props = createPropsRestProxy(__props, [
@@ -84,6 +86,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
84
86
  ]);
85
87
  const emits = __emit;
86
88
  const numberInput = useNumberInput(useForwardProps(props), emits);
89
+ function onFocusin(event) {
90
+ emits("focusin", event);
91
+ emits("focus", event);
92
+ }
93
+ function onFocusout(event) {
94
+ emits("focusout", event);
95
+ emits("blur", event);
96
+ }
87
97
  const theme = useTheme(()=>__props.theme);
88
98
  const inputCrafts = computed(()=>theme.value.crafts.tvInput());
89
99
  const crafts = computed(()=>theme.value.crafts.tvNumberInput());
@@ -115,8 +125,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
115
125
  }),
116
126
  ...unref(theme)
117
127
  })),
118
- onFocus: _cache[0] || (_cache[0] = ($event)=>emits("focus", $event)),
119
- onBlur: _cache[1] || (_cache[1] = ($event)=>emits("blur", $event))
128
+ onFocusin,
129
+ onFocusout
120
130
  }, null, 8, [
121
131
  "class"
122
132
  ]),
package/dist/components/number-input/NumberInput.vue.d.ts CHANGED
@@ -11,6 +11,8 @@ declare const __VLS_base: import("vue").DefineComponent<NumberInputProps, {
11
11
  }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
12
12
  blur: (event: FocusEvent) => any;
13
13
  focus: (event: FocusEvent) => any;
14
+ focusin: (event: FocusEvent) => any;
15
+ focusout: (event: FocusEvent) => any;
14
16
  focusChange: (details: NumberInput.FocusChangeDetails) => any;
15
17
  valueChange: (details: NumberInput.ValueChangeDetails) => any;
16
18
  "update:modelValue": (value: string) => any;
@@ -18,6 +20,8 @@ declare const __VLS_base: import("vue").DefineComponent<NumberInputProps, {
18
20
  }, string, import("vue").PublicProps, Readonly<NumberInputProps> & Readonly<{
19
21
  onBlur?: ((event: FocusEvent) => any) | undefined;
20
22
  onFocus?: ((event: FocusEvent) => any) | undefined;
23
+ onFocusin?: ((event: FocusEvent) => any) | undefined;
24
+ onFocusout?: ((event: FocusEvent) => any) | undefined;
21
25
  onFocusChange?: ((details: NumberInput.FocusChangeDetails) => any) | undefined;
22
26
  onValueChange?: ((details: NumberInput.ValueChangeDetails) => any) | undefined;
23
27
  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@raxium/vue",
3
3
  "type": "module",
4
- "version": "0.2.1",
4
+ "version": "0.2.3",
5
5
  "description": "Vue core components for Raxium, based on Ark UI",
6
6
  "author": {
7
7
  "name": "Hwacc",
@@ -65,10 +65,10 @@
65
65
  "@iconify/vue": "^5.0.0",
66
66
  "@vueuse/core": "^14.1.0",
67
67
  "es-toolkit": "^1.44.0",
68
- "lucide-vue-next": "^0.577.0",
68
+ "lucide-vue-next": "^1.0.0",
69
69
  "vue-component-type-helpers": "^3.2.1",
70
- "@raxium/shared": "0.1.1",
71
- "@raxium/themes": "0.1.4"
70
+ "@raxium/themes": "0.1.6",
71
+ "@raxium/shared": "0.1.1"
72
72
  },
73
73
  "devDependencies": {
74
74
  "@ark-ui/vue": "5.35.0",
@@ -89,7 +89,7 @@
89
89
  "vitest": "^4.1.1",
90
90
  "vue-tsc": "^3.2.4",
91
91
  "@raxium/shared": "0.1.1",
92
- "@raxium/themes": "0.1.4"
92
+ "@raxium/themes": "0.1.6"
93
93
  },
94
94
  "publishConfig": {
95
95
  "access": "public"