[TASK] push new version

CHANGELOG.md

@@ -1,6 +1,11 @@
 miru.ink / Changelog
 ====================
 
+## Version 0.0.18 - Experimental
+- Add: New `tabindex` property on `FormControl` and control components.
+- Update: Use `SharedControlProps` on many different control components.
+- Update: Use `disabled`, `required` and `invalid` on `NumberField` control component.
+
 ## Version 0.0.17 - Experimental
 - Update: package.json dependencies.
 - Update: `PopoverStd` and `ContextMenu` components.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "miru.ink",
-    "version": "0.0.17",
+    "version": "0.0.18",
     "description": "A Open-Source Vue3 / Tailwind CSS component framework and function library.",
     "keywords": [
         "ui",

src/components/control/BalloonSelector.vue

@@ -24,6 +24,7 @@
                 :type="props.multiple ? 'checkbox' : 'radio'" 
                 :name="`${props.name || props.id}${(props.multiple ? '[]' : '')}`"
                 :value="option.value"
+                :tabindex="props.tabindex"
                 :disabled="isDisabled || option.disabled || false"
                 :required="isRequired"
                 :checked="isChecked(option.value)" />

src/components/control/CheckboxField.vue

@@ -10,8 +10,8 @@
             class="checkbox-input"
             :name="props.name || fieldId"
             :value="props.value ? props.value : true"
+            :tabindex="props.tabindex"
             :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
-            :readonly="toValue(props.readonly || false) || typeof readonly == 'string'"
             :required="toValue(props.required || false) || typeof required == 'string'"
             v-model="value" />
         <label :for="`${fieldId}-input`" class="checkbox-label">
@@ -21,69 +21,27 @@
 </template>
 
 <script lang="ts">
-import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 /**
  * CheckboxField Properties
  */
-export interface CheckboxFieldProps {
-    /**
-     * A custom checkbox field id, usually passed by the FormControl component. The default value 
-     * is an auto-generated UUID.
-     */
-    id?: null | string;
-
+export interface CheckboxFieldProps extends SharedControlProps<null | boolean | number | string> {
     /**
      * The label for this checkbox field.
      */
     label?: null | string;
 
-    /**
-     * The name attribute for this checkbox field.
-     */
-    name?: null | string;
-
     /**
      * The value attribute for this checkbox field, pass nothing to use binary mode with true and 
      * false.
      */
     value?: null | number | string;
 
-    /**
-     * The value for this checkbox field, must be passed as v-model value.
-     */
-    modelValue?: null | boolean | number | string | (string | number)[];
-
     /**
      * The desired size for this checkbox field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The disabled state for this checkbox field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this checkbox field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this checkbox field.
-     */
-    required?: MaybeRef<boolean>;
-
-    /**
-     * The validation state for this checkbox field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional checkbox field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
 }
 
 /**

src/components/control/InputField.vue

@@ -13,6 +13,7 @@
             props.size ? `field-${props.size}` : '',
             props.validation ? `field-${props.validation}` : ''
         ]" 
+        :tabindex="props.tabindex"
         :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
         :required="toValue(props.required || false) || typeof required == 'string'"
         :invalid="props.validation == 'invalid' ? true : void 0"

src/components/control/NumberField.vue

@@ -4,46 +4,34 @@
             :icon="LucideMinusSign" 
             :iconProps="{ size: 16 }" 
             :size="(props.size || 'md') == 'sm' ? 'sm' : 'md'" 
-            :disabled="reachedMin"
+            :disabled="toValue(props.disabled || false) || typeof disabled == 'string' || reachedMin"
             @click="onDecrease" />
         <InputField v-bind="props" 
             type="text" 
             @keydown="onKeyDown" 
             @input.prevent="onInput" 
             inputmode="numeric" 
+            :tabindex="props.tabindex"
+            :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
+            :required="toValue(props.required || false) || typeof required == 'string'"
+            :invalid="props.validation == 'invalid' ? true : void 0"
             v-model="value" />
         <ActionButton 
             :icon="LucidePlusSign" 
             :iconProps="{ size: 16 }" 
             :size="(props.size || 'md') == 'sm' ? 'sm' : 'md'" 
-            :disabled="reachedMax"
+            :disabled="toValue(props.disabled || false) || typeof disabled == 'string' || reachedMax"
             @click="onIncrease" />
     </div>
 </template>
 
 <script lang="ts">
-import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 /**
  * NumberField Properties
  */
-export interface NumberFieldProps {
-    /**
-     * A custom number field id, usually passed by the FormControl component. The default value is an 
-     * auto-generated UUID.
-     */
-    id?: null | string;
-
-    /**
-     * The name attribute for this number field.
-     */
-    name?: null | string;
-
-    /**
-     * The value for this number field, must be passed as v-model value.
-     */
-    modelValue?: null | number | string;
-
+export interface NumberFieldProps extends SharedControlProps<null | number | string> {
     /**
      * The placeholder attribute for this number field.
      */
@@ -73,32 +61,6 @@ export interface NumberFieldProps {
      * The desired size for this number field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The validation state for this number field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional number field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
-
-    /**
-     * The disabled state for this number field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this number field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this number field.
-     */
-    required?: MaybeRef<boolean>;
 }
 
 /**
@@ -118,7 +80,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, toValue } from 'vue';
 import ActionButton from '../button/ActionButton.vue';
 import InputField from '../control/InputField.vue';
 import LucideMinusSign from '../lucide/MinusSign.vue';

src/components/control/PasswordField.vue

@@ -12,29 +12,14 @@
 
 <script lang="ts">
 import type { MaybeRef } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 export type PasswordAutoCompleteValues = 'new-password' | 'current-password' | 'one-time-code' | 'webauthn';
 
 /**
  * PasswordField Properties
  */
-export interface PasswordFieldProps {
-    /**
-     * A custom password field id, usually passed by the FormControl component. The default value is an 
-     * auto-generated UUID.
-     */
-    id?: null | string;
-
-    /**
-     * The name attribute for this password field.
-     */
-    name?: null | string;
-
-    /**
-     * The value for this password field, must be passed as v-model value.
-     */
-    modelValue?: null | string;
-
+export interface PasswordFieldProps extends SharedControlProps<null | string> {
     /**
      * The placeholder attribute for this password field.
      */
@@ -49,32 +34,6 @@ export interface PasswordFieldProps {
      * The desired size for this password field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The validation state for this password field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional password field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
-
-    /**
-     * The disabled state for this password field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this password field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this password field.
-     */
-    required?: MaybeRef<boolean>;
 }
 
 /**

src/components/control/PriceField.vue

@@ -8,6 +8,10 @@
             @keydown="onKeyDown" 
             @blur="onBlur" 
             inputmode="numeric"
+            :tabindex="props.tabindex"
+            :disabled="toValue(props.disabled || false) || typeof disabled == 'string'"
+            :required="toValue(props.required || false) || typeof required == 'string'"
+            :invalid="props.validation == 'invalid' ? true : void 0"
             v-model="value" />
         <LucideCurrencyBitcoin v-if="props.icon == 'bitcoin'" v-bind="iconBinding" class="field-currency-icon" />
         <LucideCurrencyDefault v-else-if="props.icon == 'currency'" v-bind="iconBinding" class="field-currency-icon" />
@@ -24,29 +28,13 @@
 </template>
 
 <script lang="ts">
-import type { Component, MaybeRef } from 'vue';
+import type { Component } from 'vue';
+import type { SharedControlProps } from '../form/FormControl.vue';
 
 /**
  * PriceField Properties
  */
-export interface PriceFieldProps {
-
-    /**
-     * A custom price field id, usually passed by the FormControl component. The default value is an 
-     * auto-generated UUID.
-     */
-    id?: null | string;
-
-    /**
-     * The name attribute for this price field.
-     */
-    name?: null | string;
-
-    /**
-     * The value for this price field, must be passed as v-model value.
-     */
-    modelValue?: null | number | string;
-
+export interface PriceFieldProps extends SharedControlProps<null | number | string> {
     /**
      * An additional icon which is displayed right within the input field, if available.
      */
@@ -91,32 +79,6 @@ export interface PriceFieldProps {
      * The desired size for this price field, note that `md` is the default value.
      */
     size?: 'sm' | 'md' | 'lg';
-
-    /**
-     * The validation state for this price field.
-     */
-    validation?: null | 'invalid' | 'valid';
-
-    /**
-     * Additional price field validation message, requires the validation property set either to 
-     * valid or invalid.
-     */
-    validationMessage?: null | string;
-
-    /**
-     * The disabled state for this price field.
-     */
-    disabled?: MaybeRef<boolean>;
-
-    /**
-     * The readonly state for this price field.
-     */
-    readonly?: MaybeRef<boolean>;
-
-    /**
-     * The required state for this price field.
-     */
-    required?: MaybeRef<boolean>;
 }
 
 /**
@@ -136,7 +98,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, toValue } from 'vue';
 import InputField from '../control/InputField.vue';
 import LucideCurrencyBitcoin from '../lucide/CurrencyBitcoin.vue';
 import LucideCurrencyDefault from '../lucide/CurrencyDefault.vue';