fix(models): apply models on props functions (#287)

pubg · Nov 14, 2024 · c34452c · c34452c
1 parent 20a0eab
commit c34452c
Show file tree

Hide file tree

Showing 43 changed files with 2,732 additions and 4,657 deletions.
diff --git a/packages/vlossom/package-lock.json b/packages/vlossom/package-lock.json
diff --git a/packages/vlossom/package.json b/packages/vlossom/package.json
@@ -51,51 +51,51 @@
         "./styles": "./dist/style.css"
     },
     "peerDependencies": {
-        "@vueuse/core": "^10.11.0",
-        "nanoid": "^5.0.7",
+        "@vueuse/core": "^10.11.1",
+        "nanoid": "^5.0.8",
         "radash": "^12.1.0",
-        "vue": "^3.4.0",
+        "vue": "^3.5.12",
         "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^1.9.0",
-        "@eslint/js": "^9.13.0",
-        "@storybook/addon-a11y": "^8.3.6",
-        "@storybook/addon-essentials": "^8.3.6",
-        "@storybook/addon-interactions": "^8.3.6",
-        "@storybook/addon-links": "^8.3.6",
-        "@storybook/blocks": "^8.3.6",
-        "@storybook/test": "^8.3.6",
+        "@chromatic-com/storybook": "^3.2.2",
+        "@eslint/js": "^9.14.0",
+        "@storybook/addon-a11y": "^8.4.3",
+        "@storybook/addon-essentials": "^8.4.3",
+        "@storybook/addon-interactions": "^8.4.3",
+        "@storybook/addon-links": "^8.4.3",
+        "@storybook/blocks": "^8.4.3",
+        "@storybook/test": "^8.4.3",
         "@storybook/test-runner": "^0.19.1",
-        "@storybook/vue3": "^8.3.6",
-        "@storybook/vue3-vite": "^8.3.6",
-        "@types/node": "^20.16.14",
-        "@vitejs/plugin-vue": "^5.0.5",
-        "@vitest/coverage-v8": "^2.1.3",
+        "@storybook/vue3": "^8.4.3",
+        "@storybook/vue3-vite": "^8.4.3",
+        "@types/node": "^20.17.6",
+        "@vitejs/plugin-vue": "^5.2.0",
+        "@vitest/coverage-v8": "^2.1.5",
         "@vue/test-utils": "^2.4.6",
         "autoprefixer": "^10.4.20",
         "axe-playwright": "^2.0.3",
-        "chromatic": "^11.14.0",
-        "eslint": "^9.13.0",
-        "eslint-plugin-vue": "^9.29.1",
-        "globals": "^15.11.0",
+        "chromatic": "^11.18.1",
+        "eslint": "^9.14.0",
+        "eslint-plugin-vue": "^9.31.0",
+        "globals": "^15.12.0",
         "jsdom": "^24.1.3",
         "ress": "^5.0.2",
         "rollup-plugin-visualizer": "^5.12.0",
         "sass": "1.77.8",
-        "storybook": "^8.3.6",
+        "storybook": "^8.4.3",
         "typescript": "^5.6.3",
-        "typescript-eslint": "^8.11.0",
-        "vite": "^5.4.9",
-        "vite-plugin-dts": "^3.9.1",
-        "vitest": "^2.1.3",
-        "vue-tsc": "^2.0.26"
+        "typescript-eslint": "^8.14.0",
+        "vite": "^5.4.11",
+        "vite-plugin-dts": "^4.3.0",
+        "vitest": "^2.1.5",
+        "vue-tsc": "^2.1.10"
     },
     "dependencies": {
-        "@vueuse/core": "^10.11.0",
-        "nanoid": "^5.0.7",
+        "@vueuse/core": "^10.11.1",
+        "nanoid": "^5.0.8",
         "radash": "^12.1.0",
-        "vue": "^3.4.0",
+        "vue": "^3.5.12",
         "vuedraggable": "^4.1.0"
     }
 }
diff --git a/packages/vlossom/src/components/vs-accordion/VsAccordion.vue b/packages/vlossom/src/components/vs-accordion/VsAccordion.vue
@@ -18,7 +18,8 @@
 
 <script lang="ts">
 import { PropType, defineComponent, ref, toRefs, watch } from 'vue';
-import { getResponsiveProps, useColorScheme, useStyleSet } from '@/composables';
+import { useColorScheme, useStyleSet } from '@/composables';
+import { getResponsiveProps } from '@/models';
 import { VsComponent, type ColorScheme } from '@/declaration';
 import VsResponsive from '@/components/vs-responsive/VsResponsive.vue';
 

diff --git a/packages/vlossom/src/components/vs-block/VsBlock.vue b/packages/vlossom/src/components/vs-block/VsBlock.vue
@@ -11,7 +11,8 @@
 
 <script lang="ts">
 import { PropType, computed, defineComponent, toRefs } from 'vue';
-import { getResponsiveProps, useColorScheme, useStyleSet } from '@/composables';
+import { useColorScheme, useStyleSet } from '@/composables';
+import { getResponsiveProps } from '@/models';
 import { VsComponent, type ColorScheme } from '@/declaration';
 import VsResponsive from '@/components/vs-responsive/VsResponsive.vue';
 

diff --git a/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue b/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue
@@ -57,15 +57,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, Ref, ref, toRefs } from 'vue';
-import {
-    useColorScheme,
-    useStyleSet,
-    getResponsiveProps,
-    getInputProps,
-    useInput,
-    useInputOption,
-    getInputOptionProps,
-} from '@/composables';
+import { useColorScheme, useStyleSet, useInput, useInputOption } from '@/composables';
+import { getInputProps, getInputOptionProps, getResponsiveProps } from '@/models';
 import { VsComponent, VsNode, type ColorScheme } from '@/declaration';
 import { utils } from '@/utils';
 import VsInputWrapper from '@/components/vs-input-wrapper/VsInputWrapper.vue';
@@ -79,7 +72,7 @@ export default defineComponent({
     name,
     components: { VsInputWrapper, VsCheckboxNode },
     props: {
-        ...getInputProps<any[], ['ariaLabel', 'noClear', 'placeholder']>('ariaLabel', 'noClear', 'placeholder'),
+        ...getInputProps<any[], 'ariaLabel' | 'noClear' | 'placeholder'>('ariaLabel', 'noClear', 'placeholder'),
         ...getInputOptionProps(),
         ...getResponsiveProps(),
         colorScheme: { type: String as PropType<ColorScheme> },
@@ -106,7 +99,7 @@ export default defineComponent({
         },
     },
     emits: ['update:modelValue', 'update:changed', 'update:valid', 'change', 'focus', 'blur'],
-    expose: ['clear', 'validate', 'focus', 'blur'],
+    // expose: ['clear', 'validate', 'focus', 'blur'],
     setup(props, context) {
         const {
             colorScheme,

diff --git a/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue b/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue
@@ -49,14 +49,8 @@
 
 <script lang="ts">
 import { defineComponent, PropType, Ref, ref, toRefs } from 'vue';
-import {
-    useColorScheme,
-    useStyleSet,
-    getResponsiveProps,
-    getInputProps,
-    useInput,
-    useValueMatcher,
-} from '@/composables';
+import { useColorScheme, useStyleSet, useInput, useValueMatcher } from '@/composables';
+import { getInputProps, getResponsiveProps } from '@/models';
 import { VsComponent, VsNode, type ColorScheme } from '@/declaration';
 import VsInputWrapper from '@/components/vs-input-wrapper/VsInputWrapper.vue';
 import { VsCheckboxNode, VsCheckboxNodeStyleSet } from '@/nodes';
@@ -68,7 +62,7 @@ export default defineComponent({
     name,
     components: { VsInputWrapper, VsCheckboxNode },
     props: {
-        ...getInputProps<any, ['placeholder', 'noClear']>('placeholder', 'noClear'),
+        ...getInputProps<any, 'placeholder' | 'noClear'>('placeholder', 'noClear'),
         ...getResponsiveProps(),
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsCheckboxStyleSet> },
@@ -86,7 +80,7 @@ export default defineComponent({
         modelValue: { type: null, default: false },
     },
     emits: ['update:modelValue', 'update:changed', 'update:valid', 'change', 'focus', 'blur'],
-    expose: ['clear', 'validate', 'focus', 'blur'],
+    // expose: ['clear', 'validate', 'focus', 'blur'],
     setup(props, context) {
         const {
             beforeChange,

diff --git a/packages/vlossom/src/components/vs-confirm/VsConfirm.vue b/packages/vlossom/src/components/vs-confirm/VsConfirm.vue
@@ -34,7 +34,7 @@
 import { PropType, defineComponent, ref, toRefs, watch } from 'vue';
 import { VsComponent, type ColorScheme } from '@/declaration';
 import { store } from '@/stores';
-import { getModalProps } from '@/composables';
+import { getModalProps } from '@/models';
 import VsButton from '@/components/vs-button/VsButton.vue';
 import VsModal from '@/components/vs-modal/VsModal.vue';
 import { VsModalStyleSet } from '@/components/vs-modal/types';
@@ -53,7 +53,7 @@ export default defineComponent({
         modelValue: { type: Boolean, default: true },
     },
     emits: ['update:modelValue'],
-    expose: ['ok', 'cancel'],
+    // expose: ['ok', 'cancel'],
     setup(props, { emit }) {
         const { modelValue } = toRefs(props);
 

diff --git a/packages/vlossom/src/components/vs-container/VsContainer.vue b/packages/vlossom/src/components/vs-container/VsContainer.vue
@@ -7,7 +7,8 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, inject, PropType, toRefs } from 'vue';
 import { ColorScheme, VS_LAYOUT, VsComponent } from '@/declaration';
-import { getGridProps, useColorScheme, useLayout } from '@/composables';
+import { useColorScheme, useLayout } from '@/composables';
+import { getGridProps } from '@/models';
 import { utils } from '@/utils';
 
 const name = VsComponent.VsContainer;

diff --git a/packages/vlossom/src/components/vs-file-input/VsFileInput.vue b/packages/vlossom/src/components/vs-file-input/VsFileInput.vue
@@ -73,7 +73,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, Ref, ref, toRefs } from 'vue';
-import { useColorScheme, useStyleSet, getResponsiveProps, getInputProps, useInput, useStateClass } from '@/composables';
+import { useColorScheme, useStyleSet, useInput, useStateClass } from '@/composables';
+import { getInputProps, getResponsiveProps } from '@/models';
 import { VsComponent, type ColorScheme } from '@/declaration';
 import VsInputWrapper from '@/components/vs-input-wrapper/VsInputWrapper.vue';
 import { VsIcon } from '@/icons';
@@ -85,7 +86,7 @@ export default defineComponent({
     name,
     components: { VsInputWrapper, VsIcon },
     props: {
-        ...getInputProps<InputValueType, []>(),
+        ...getInputProps<InputValueType>(),
         ...getResponsiveProps(),
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsFileInputStyleSet> },
@@ -96,7 +97,7 @@ export default defineComponent({
         modelValue: { type: [Object, Array] as PropType<InputValueType>, default: null },
     },
     emits: ['update:modelValue', 'update:changed', 'update:valid', 'change', 'focus', 'blur'],
-    expose: ['clear', 'validate', 'focus', 'blur'],
+    // expose: ['clear', 'validate', 'focus', 'blur'],
     setup(props, context) {
         const {
             colorScheme,

diff --git a/packages/vlossom/src/components/vs-form/VsForm.vue b/packages/vlossom/src/components/vs-form/VsForm.vue
@@ -14,7 +14,8 @@
 <script lang="ts">
 import { computed, defineComponent, nextTick, PropType, provide, toRefs, watch } from 'vue';
 import { ColorScheme, VS_FORM, VsComponent, type VsFormProvide } from '@/declaration';
-import { getGridProps, useColorScheme, useFormProvide } from '@/composables';
+import { useColorScheme, useFormProvide } from '@/composables';
+import { getGridProps } from '@/models';
 import VsContainer from '@/components/vs-container/VsContainer.vue';
 
 const name = VsComponent.VsForm;
@@ -32,7 +33,7 @@ export default defineComponent({
         valid: { type: Boolean, default: true },
     },
     emits: ['update:changed', 'update:valid', 'error'],
-    expose: ['validate', 'clear'],
+    // expose: ['validate', 'clear'],
     setup(props, { emit }) {
         const { colorScheme, disabled, readonly } = toRefs(props);
 

diff --git a/packages/vlossom/src/components/vs-index-view/VsIndexView.vue b/packages/vlossom/src/components/vs-index-view/VsIndexView.vue
@@ -14,7 +14,8 @@
 <script lang="ts">
 import { defineComponent, computed, toRefs, PropType, Ref, ref, watch, nextTick } from 'vue';
 import { ColorScheme, VsComponent } from '@/declaration';
-import { getResponsiveProps, useColorScheme } from '@/composables';
+import { useColorScheme } from '@/composables';
+import { getResponsiveProps } from '@/models';
 import VsResponsive from '@/components/vs-responsive/VsResponsive.vue';
 
 const name = VsComponent.VsIndexView;

diff --git a/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.vue b/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.vue
@@ -37,7 +37,8 @@
 <script lang="ts">
 import { PropType, defineComponent, ref, toRefs, watch } from 'vue';
 import { ColorScheme, VsComponent, type StateMessage } from '@/declaration';
-import { getResponsiveProps, useColorScheme } from '@/composables';
+import { useColorScheme } from '@/composables';
+import { getResponsiveProps } from '@/models';
 import VsResponsive from '@/components/vs-responsive/VsResponsive.vue';
 import VsMessage from '@/components/vs-message/VsMessage.vue';
 

diff --git a/packages/vlossom/src/components/vs-input/VsInput.vue b/packages/vlossom/src/components/vs-input/VsInput.vue
@@ -66,15 +66,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, Ref, ref, toRefs } from 'vue';
-import {
-    useColorScheme,
-    useStyleSet,
-    getResponsiveProps,
-    getInputProps,
-    useInput,
-    useStringModifier,
-    useStateClass,
-} from '@/composables';
+import { useColorScheme, useStyleSet, useInput, useStringModifier, useStateClass } from '@/composables';
+import { getInputProps, getResponsiveProps } from '@/models';
 import { VsComponent, StringModifiers, type ColorScheme } from '@/declaration';
 import VsInputWrapper from '@/components/vs-input-wrapper/VsInputWrapper.vue';
 import { VsIcon } from '@/icons';
@@ -89,7 +82,7 @@ export default defineComponent({
     name,
     components: { VsInputWrapper, VsIcon },
     props: {
-        ...getInputProps<InputValueType, []>(),
+        ...getInputProps<InputValueType>(),
         ...getResponsiveProps(),
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsInputStyleSet> },
@@ -126,7 +119,7 @@ export default defineComponent({
         'prepend',
         'append',
     ],
-    expose: ['clear', 'validate', 'focus', 'blur', 'select'],
+    // expose: ['clear', 'validate', 'focus', 'blur', 'select'],
     setup(props, context) {
         const {
             colorScheme,

diff --git a/packages/vlossom/src/components/vs-label-value/VsLabelValue.vue b/packages/vlossom/src/components/vs-label-value/VsLabelValue.vue
@@ -18,7 +18,8 @@
 </template>
 <script lang="ts">
 import { PropType, computed, defineComponent, toRefs } from 'vue';
-import { getResponsiveProps, useColorScheme, useStyleSet } from '@/composables';
+import { useColorScheme, useStyleSet } from '@/composables';
+import { getResponsiveProps } from '@/models';
 import { VsComponent, type ColorScheme } from '@/declaration';
 import VsResponsive from '@/components/vs-responsive/VsResponsive.vue';
 

diff --git a/packages/vlossom/src/components/vs-modal/VsModal.vue b/packages/vlossom/src/components/vs-modal/VsModal.vue
@@ -38,7 +38,8 @@
 
 <script lang="ts">
 import { defineComponent, ref, toRefs, watch, computed, type PropType } from 'vue';
-import { useColorScheme, useBodyScroll, useStyleSet, useEscClose, getModalProps } from '@/composables';
+import { useColorScheme, useBodyScroll, useStyleSet, useEscClose } from '@/composables';
+import { getModalProps } from '@/models';
 import { VsComponent, Size, SIZES, MODAL_DURATION, type ColorScheme } from '@/declaration';
 import { VsFocusTrap } from '@/nodes';
 import { utils } from '@/utils';

diff --git a/packages/vlossom/src/components/vs-pagination/VsPagination.vue b/packages/vlossom/src/components/vs-pagination/VsPagination.vue
@@ -92,7 +92,7 @@ export default defineComponent({
         modelValue: { type: Number, default: 1 },
     },
     emits: ['update:modelValue', 'change'],
-    expose: ['goFirst', 'goLast', 'goPrev', 'goNext', 'setPage'],
+    // expose: ['goFirst', 'goLast', 'goPrev', 'goNext', 'setPage'],
     setup(props, { emit }) {
         const { colorScheme, styleSet, modelValue, length, showingLength } = toRefs(props);
 

diff --git a/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue b/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue
@@ -57,15 +57,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, Ref, ref, toRefs } from 'vue';
-import {
-    useColorScheme,
-    useStyleSet,
-    getResponsiveProps,
-    getInputProps,
-    useInput,
-    useInputOption,
-    getInputOptionProps,
-} from '@/composables';
+import { useColorScheme, useStyleSet, useInput, useInputOption } from '@/composables';
+import { getInputProps, getInputOptionProps, getResponsiveProps } from '@/models';
 import { VsComponent, VsNode, type ColorScheme } from '@/declaration';
 import { utils } from '@/utils';
 import VsInputWrapper from '@/components/vs-input-wrapper/VsInputWrapper.vue';
@@ -77,7 +70,7 @@ export default defineComponent({
     name: VsComponent.VsRadioSet,
     components: { VsInputWrapper, VsRadioNode },
     props: {
-        ...getInputProps<any[], ['ariaLabel', 'noClear', 'placeholder']>('ariaLabel', 'noClear', 'placeholder'),
+        ...getInputProps<any[], 'ariaLabel' | 'noClear' | 'placeholder'>('ariaLabel', 'noClear', 'placeholder'),
         ...getInputOptionProps(),
         ...getResponsiveProps(),
         colorScheme: { type: String as PropType<ColorScheme> },
@@ -88,7 +81,7 @@ export default defineComponent({
         modelValue: { type: null, default: null },
     },
     emits: ['update:modelValue', 'update:changed', 'update:valid', 'change', 'focus', 'blur'],
-    expose: ['clear', 'validate', 'focus', 'blur'],
+    // expose: ['clear', 'validate', 'focus', 'blur'],
     setup(props, context) {
         const {
             colorScheme,

diff --git a/packages/vlossom/src/components/vs-radio/VsRadio.vue b/packages/vlossom/src/components/vs-radio/VsRadio.vue
@@ -48,7 +48,8 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, Ref, ref, toRefs } from 'vue';
-import { useColorScheme, useStyleSet, getResponsiveProps, getInputProps, useInput } from '@/composables';
+import { useColorScheme, useStyleSet, useInput } from '@/composables';
+import { getInputProps, getResponsiveProps } from '@/models';
 import { VsComponent, VsNode, type ColorScheme } from '@/declaration';
 import { utils } from '@/utils';
 import VsInputWrapper from '@/components/vs-input-wrapper/VsInputWrapper.vue';
@@ -60,7 +61,7 @@ export default defineComponent({
     name: VsComponent.VsRadio,
     components: { VsInputWrapper, VsRadioNode },
     props: {
-        ...getInputProps<any, ['placeholder', 'noClear']>('placeholder', 'noClear'),
+        ...getInputProps<any, 'placeholder' | 'noClear'>('placeholder', 'noClear'),
         ...getResponsiveProps(),
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsRadioStyleSet> },
@@ -72,7 +73,7 @@ export default defineComponent({
         modelValue: { type: null, default: null },
     },
     emits: ['update:modelValue', 'update:changed', 'update:valid', 'change', 'focus', 'blur'],
-    expose: ['clear', 'validate', 'focus', 'blur'],
+    // expose: ['clear', 'validate', 'focus', 'blur'],
     setup(props, context) {
         const {
             checked,