sprintify-ui 0.2.14 → 0.2.16

package/dist/types/src/components/BaseGantt.vue.d.ts

@@ -16,7 +16,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<number>;
         default: number;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "item:click"[], "item:click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("item:click" | "row:click")[], "item:click" | "row:click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     maxHeight: {
         type: import("vue").PropType<number>;
         default: undefined;
@@ -35,6 +35,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>> & {
     "onItem:click"?: ((...args: any[]) => any) | undefined;
+    "onRow:click"?: ((...args: any[]) => any) | undefined;
 }, {
     maxHeight: number;
     rowHeight: number;

package/dist/types/src/components/BaseInput.vue.d.ts

@@ -1,4 +1,6 @@
 import { PropType } from 'vue';
+declare function focus(): void;
+declare function blur(): void;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: string;
@@ -71,7 +73,10 @@ declare const _default: import("vue").DefineComponent<{
         type: (ArrayConstructor | StringConstructor | FunctionConstructor)[];
         default(): null;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
         type: PropType<string | number | null>;

package/dist/types/src/components/BaseInputPercent.vue.d.ts

@@ -1,4 +1,6 @@
 import { PropType } from 'vue';
+declare function focus(): void;
+declare function blur(): void;
 declare const _default: import("vue").DefineComponent<{
     /**
      * The value of the input. Can be a number or null.
@@ -56,7 +58,10 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
         type: NumberConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "focus" | "blur")[], "update:modelValue" | "focus" | "blur", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The value of the input. Can be a number or null.
      * 0.1 = 10%

package/dist/types/src/components/BasePassword.vue.d.ts

@@ -1,4 +1,6 @@
 import { PropType } from 'vue';
+declare function focus(): void;
+declare function blur(): void;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: string;
@@ -24,7 +26,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
         type: PropType<string | null>;

package/dist/types/src/components/BaseTextarea.vue.d.ts

@@ -1,4 +1,6 @@
 import { PropType } from 'vue';
+declare function focus(): void;
+declare function blur(): void;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: undefined;
@@ -40,7 +42,10 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
         type: PropType<string | null | undefined>;

package/dist/types/src/components/BaseTextareaAutoresize.vue.d.ts

@@ -1,4 +1,6 @@
 import { PropType } from 'vue';
+declare function focus(): void;
+declare function blur(): void;
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         default: string;
@@ -44,7 +46,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         type: PropType<string | string[]>;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], "input" | "submit" | "update:modelValue" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {
+    focus: typeof focus;
+    blur: typeof blur;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "submit" | "update:modelValue" | "focus")[], "input" | "submit" | "update:modelValue" | "focus", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: string;
         type: PropType<string | null>;

package/dist/types/src/components/BaseUniqueCode.vue.d.ts

@@ -0,0 +1,33 @@
+import { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        required: true;
+        type: PropType<string | number | null>;
+    };
+    numberOfCharacters: {
+        required: true;
+        type: NumberConstructor;
+    };
+    type: {
+        default: string;
+        type: PropType<"numeric" | "alphanumeric">;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        required: true;
+        type: PropType<string | number | null>;
+    };
+    numberOfCharacters: {
+        required: true;
+        type: NumberConstructor;
+    };
+    type: {
+        default: string;
+        type: PropType<"numeric" | "alphanumeric">;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    type: "numeric" | "alphanumeric";
+}, {}>;
+export default _default;

package/dist/types/src/components/index.d.ts

@@ -88,8 +88,9 @@ import BaseTextarea from './BaseTextarea.vue';
 import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
 import BaseTimeline from './BaseTimeline.vue';
 import BaseTimelineItem from './BaseTimelineItem.vue';
+import BaseUniqueCode from './BaseUniqueCode.vue';
 import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClickOutside, BaseClipboard, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/dist/types/src/index.d.ts

@@ -18,6 +18,7 @@ declare const messages: {
             and: string;
             apply: string;
             apply_filters: string;
+            authentication_code: string;
             autocomplete_placeholder: string;
             cancel: string;
             city: string;
@@ -105,6 +106,7 @@ declare const messages: {
             and: string;
             apply: string;
             apply_filters: string;
+            authentication_code: string;
             autocomplete_placeholder: string;
             cancel: string;
             city: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseGantt.stories.js

@@ -59,11 +59,15 @@ const Template = (args) => ({
       alert(`Item "${item.name}" clicked`);
     }
 
-    return { args, onItemClick };
+    function onRowClick(item) {
+      alert(`Row "${item.name}" clicked`);
+    }
+
+    return { args, onItemClick, onRowClick };
   },
   template: `
   <BaseCard clipped>
-    <BaseGantt v-bind="args" @item:click="onItemClick">
+    <BaseGantt v-bind="args" @item:click="onItemClick" @row:click="onRowClick">
     </BaseGantt>
   </BaseCard>
   `,

package/src/components/BaseGantt.vue

@@ -34,6 +34,7 @@
           :style="{
             height: `${props.rowHeight}px`,
           }"
+          @click="$emit('row:click', row)"
         >
           <slot
             name="sidebarItem"
@@ -250,6 +251,7 @@ const props = withDefaults(defineProps<{
 
 defineEmits([
   'item:click',
+  'row:click',
 ]);
 
 // Config

package/src/components/BaseInput.stories.js

@@ -149,3 +149,20 @@ export const Field = createFieldStory({
   componentName: 'BaseInput',
   label: 'Name',
 });
+
+
+const FocusTemplate = (args) => ({
+  components: { BaseInput },
+  setup() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BaseInput ref="input" v-model="value" v-bind="args" class="w-full"></BaseInput>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+export const Focus = FocusTemplate.bind({});

package/src/components/BaseInput.vue

@@ -156,6 +156,8 @@ const props = defineProps({
   },
 });
 
+const input = ref<HTMLInputElement | null>(null);
+
 const maskOptions = computed(() => {
   if (props.mask) {
     return {
@@ -246,4 +248,17 @@ const backgroundColor = computed(() => {
 const textColor = computed(() => {
   return hasErrorInternal.value ? 'text-red-800' : 'text-slate-600';
 });
+
+function focus() {
+  input.value?.focus();
+}
+
+function blur() {
+  input.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
 </script>

package/src/components/BaseInputPercent.stories.js

@@ -48,3 +48,19 @@ export const Field = createFieldStory({
   componentName: 'BaseInputPercent',
   label: 'Rebate',
 });
+
+const FocusTemplate = (args) => ({
+  components: { BaseInputPercent },
+  setup() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BaseInputPercent ref="input" v-model="value" v-bind="args" class="w-full"></BaseInputPercent>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+export const Focus = FocusTemplate.bind({});

package/src/components/BaseInputPercent.vue

@@ -1,5 +1,6 @@
 <template>
   <BaseInput
+    ref="input"
     :model-value="value"
     suffix="%"
     type="number"
@@ -83,6 +84,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
 
+const input = ref<HTMLInputElement | null>(null);
+
 const stepNormalized = computed<number>(() => {
   if (props.step === undefined) return 1;
   if (props.step === 0) return 1;
@@ -120,4 +123,17 @@ function onUpdate(value: string | number | null) {
 
   emit('update:modelValue', round(valueToNumber / 100, precision.value + 2));
 }
+
+function focus() {
+  input.value?.focus();
+}
+
+function blur() {
+  input.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
 </script>

package/src/components/BasePassword.stories.js

@@ -39,3 +39,20 @@ export const Field = createFieldStory({
   componentName: 'BasePassword',
   label: 'Password',
 });
+
+
+const FocusTemplate = (args) => ({
+  components: { BasePassword },
+  setup() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BasePassword ref="input" v-model="value" v-bind="args" class="w-full"></BasePassword>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+export const Focus = FocusTemplate.bind({});

package/src/components/BasePassword.vue

@@ -73,6 +73,8 @@ const props = defineProps({
   },
 });
 
+const input = ref<HTMLInputElement | null>(null);
+
 const emit = defineEmits(['update:modelValue']);
 
 const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
@@ -89,4 +91,17 @@ function onInput(event: any) {
   const value = event.target.value + '';
   emitUpdate(trim(value));
 }
+
+function focus() {
+  input.value?.focus();
+}
+
+function blur() {
+  input.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
 </script>

package/src/components/BaseTextarea.stories.js

@@ -41,3 +41,19 @@ export const Field = createFieldStory({
   componentName: 'BaseTextarea',
   label: 'Biography',
 });
+
+const FocusTemplate = (args) => ({
+  components: { BaseTextarea },
+  setup() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BaseTextarea ref="input" v-model="value" v-bind="args" class="w-full"></BaseTextarea>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+export const Focus = FocusTemplate.bind({});

package/src/components/BaseTextarea.vue

@@ -1,5 +1,6 @@
 <template>
   <textarea
+    ref="textareaRef"
     :value="modelValue ?? undefined"
     :type="type"
     :name="nameInternal"
@@ -84,4 +85,19 @@ function transformInputValue(event: Event | null): string | null {
 
   return '';
 }
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+
+function focus() {
+  textareaRef.value?.focus();
+}
+
+function blur() {
+  textareaRef.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
 </script>

package/src/components/BaseTextareaAutoresize.stories.js

@@ -85,3 +85,19 @@ export const Field = createFieldStory({
   componentName: 'BaseTextareaAutoresize',
   label: 'Biography',
 });
+
+const FocusTemplate = (args) => ({
+  components: { BaseTextareaAutoresize },
+  setup() {
+    const value = ref(null);
+    const input = ref(null);
+    return { args, value, input };
+  },
+  template: `
+    <BaseTextareaAutoresize ref="input" v-model="value" v-bind="args" class="w-full"></BaseTextareaAutoresize>
+
+    <button @click="input.focus()" class="mt-4 underline">Focus</button>
+  `,
+});
+
+export const Focus = FocusTemplate.bind({});

package/src/components/BaseTextareaAutoresize.vue

@@ -5,6 +5,7 @@
     :style="{ maxHeight: maxHeight + 'px' }"
   >
     <textarea
+      ref="textareaRef"
       :value="modelValue ?? ''"
       :name="nameInternal"
       :placeholder="placeholder"
@@ -95,6 +96,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
 
+const textareaRef = ref<null | HTMLTextAreaElement>(null);
+
 const { nameInternal, requiredInternal, hasErrorInternal } =
   useField({
     name: computed(() => props.name),
@@ -147,4 +150,17 @@ const textareaClasses = computed(() => {
     props.twTextarea
   );
 });
+
+function focus() {
+  textareaRef.value?.focus();
+}
+
+function blur() {
+  textareaRef.value?.blur();
+}
+
+defineExpose({
+  focus,
+  blur,
+});
 </script>

package/src/components/BaseUniqueCode.stories.js

@@ -0,0 +1,36 @@
+import BaseUniqueCode from './BaseUniqueCode.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Components/BaseUniqueCode',
+  component: BaseUniqueCode,
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['numeric', 'alphanumeric'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseUniqueCode, ShowValue },
+  setup() {
+    const value = ref('');
+    return { args, value };
+  },
+  template: `
+    <BaseUniqueCode v-model="value" v-bind="args" class="w-full"></BaseUniqueCode>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Numeric = Template.bind({});
+Numeric.args = {
+  numberOfCharacters: 4,
+};
+
+export const Alphanumeric = Template.bind({});
+Alphanumeric.args = {
+  numberOfCharacters: 4,
+  type: 'text'
+};