fix(vue): useContext

konstaui · Mar 25, 2024 · 5206ae0 · 5206ae0
1 parent 6c39846
commit 5206ae0
Show file tree

Hide file tree

Showing 67 changed files with 444 additions and 94 deletions.
diff --git a/src/vue/components/Actions.vue b/src/vue/components/Actions.vue
@@ -6,6 +6,8 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { ActionsClasses } from '../../shared/classes/ActionsClasses.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
@@ -29,6 +31,7 @@
     },
     emits: ['backdropclick'],
     setup(props, ctx) {
+      const context = useContext();
       const state = computed(() => (props.opened ? 'opened' : 'closed'));
 
       const c = useThemeClasses(props, () =>

diff --git a/src/vue/components/ActionsButton.vue b/src/vue/components/ActionsButton.vue
@@ -11,6 +11,8 @@
 </template>
 <script>
   import { ref, computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useTheme } from '../shared/use-theme.js';
@@ -52,7 +54,8 @@
       fontSizeIos: { type: String, default: 'text-xl' },
       fontSizeMaterial: { type: String, default: 'text-base' },
     },
-    setup(props, ctx) {
+    setup(props) {
+      const context = useContext();
       const rippleElRef = ref(null);
       const Component = computed(() => {
         let c = props.component;
@@ -65,13 +68,13 @@
         return c;
       });
 
-      useTouchRipple(rippleElRef, props);
+      useTouchRipple(rippleElRef, props, { context });
 
       const colors = computed(() =>
         ActionsButtonColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme();
+      const theme = useTheme(context);
 
       const isDividers = computed(() =>
         typeof props.dividers === 'undefined'
@@ -87,15 +90,12 @@
           : props.bold
       );
 
-      const c = useThemeClasses(
-        props,
-        () =>
-          ActionsButtonClasses(
-            { ...props, bold: isBold.value, dividers: isDividers.value },
-            colors.value,
-            useDarkClasses
-          ),
-        ctx.attrs.class
+      const c = useThemeClasses(props, () =>
+        ActionsButtonClasses(
+          { ...props, bold: isBold.value, dividers: isDividers.value },
+          colors.value,
+          useDarkClasses
+        )
       );
 
       return {

diff --git a/src/vue/components/ActionsGroup.vue b/src/vue/components/ActionsGroup.vue
@@ -4,7 +4,9 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ActionsGroupClasses } from '../../shared/classes/ActionsGroupClasses.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -25,10 +27,9 @@
       dividers: { type: Boolean, default: true },
     },
     setup(props, ctx) {
-      const c = useThemeClasses(
-        props,
-        () => ActionsGroupClasses(props),
-        ctx.attrs.class
+      const context = useContext();
+      const c = useThemeClasses(props, () =>
+        ActionsGroupClasses(props, ctx.attrs.class)
       );
 
       return {

diff --git a/src/vue/components/ActionsLabel.vue b/src/vue/components/ActionsLabel.vue
@@ -5,11 +5,13 @@
 </template>
 <script>
   import { computed } from 'vue';
-  import { useTheme } from '../shared/use-theme.js';
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { useContext } from '../shared/use-context.js';
+
   import { ActionsLabelClasses } from '../../shared/classes/ActionsLabelClasses.js';
   import { ActionsLabelColors } from '../../shared/colors/ActionsLabelColors.js';
+  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { useTheme } from '../shared/use-theme.js';
 
   export default {
     name: 'k-actions-label',
@@ -34,22 +36,21 @@
       fontSizeMaterial: { type: String, default: 'text-sm' },
     },
     setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         ActionsLabelColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme();
+      const theme = useTheme(context);
 
       const isDividers = computed(() =>
         typeof props.dividers === 'undefined'
           ? theme.value === 'ios'
           : props.dividers
       );
 
-      const c = useThemeClasses(
-        { ...props, dividers: isDividers.value },
-        () => ActionsLabelClasses(props, colors.value),
-        ctx.attrs.class
+      const c = useThemeClasses({ ...props, dividers: isDividers.value }, () =>
+        ActionsLabelClasses(props, colors.value)
       );
 
       return {

diff --git a/src/vue/components/App.vue b/src/vue/components/App.vue
@@ -12,8 +12,10 @@
 </template>
 <script>
   import { computed } from 'vue';
-  import { useAutoTheme } from '../shared/use-auto-theme.js';
+
   import KonstaProvider from '../shared/KonstaProvider.vue';
+  import { useAutoTheme } from '../shared/use-auto-theme.js';
+
   import { AppClasses } from '../../shared/classes/AppClasses.js';
 
   export default {

diff --git a/src/vue/components/Badge.vue b/src/vue/components/Badge.vue
@@ -5,6 +5,7 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
   import { BadgeClasses } from '../../shared/classes/BadgeClasses.js';
   import { BadgeColors } from '../../shared/colors/BadgeColors.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
@@ -33,6 +34,7 @@
       },
     },
     setup(props) {
+      const context = useContext();
       const colors = computed(() => BadgeColors(props.colors || {}));
 
       const size = computed(() => (props.small ? 'sm' : 'md'));

diff --git a/src/vue/components/Block.vue b/src/vue/components/Block.vue
@@ -5,11 +5,18 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { cls } from '../../shared/cls.js';
+
   import { BlockClasses } from '../../shared/classes/BlockClasses.js';
+
   import { BlockColors } from '../../shared/colors/BlockColors.js';
 
   export default {
@@ -44,11 +51,12 @@
       nested: { type: Boolean, default: false },
     },
     setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         BlockColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme();
+      const theme = useTheme(context);
 
       const isStrong = computed(() =>
         typeof props.strong === 'undefined'

diff --git a/src/vue/components/BlockFooter.vue b/src/vue/components/BlockFooter.vue
@@ -5,10 +5,16 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { BlockFooterClasses } from '../../shared/classes/BlockFooterClasses.js';
+
   import { BlockFooterColors } from '../../shared/colors/BlockFooterColors.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -33,8 +39,9 @@
       insetIos: { type: Boolean, default: false },
       insetMaterial: { type: Boolean, default: false },
     },
-    setup(props) {
-      const theme = useTheme();
+    setup(props, ctx) {
+      const context = useContext();
+      const theme = useTheme(context);
       const isInset = computed(() =>
         typeof props.inset === 'undefined'
           ? theme.value === 'ios'

diff --git a/src/vue/components/BlockHeader.vue b/src/vue/components/BlockHeader.vue
@@ -5,11 +5,16 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { useTheme } from '../shared/use-theme.js';
 
   import { BlockHeaderClasses } from '../../shared/classes/BlockHeaderClasses.js';
+
   import { BlockHeaderColors } from '../../shared/colors/BlockHeaderColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -35,7 +40,8 @@
       insetMaterial: { type: Boolean, default: false },
     },
     setup(props) {
-      const theme = useTheme();
+      const context = useContext();
+      const theme = useTheme(context);
       const isInset = computed(() =>
         typeof props.inset === 'undefined'
           ? theme.value === 'ios'

diff --git a/src/vue/components/BlockTitle.vue b/src/vue/components/BlockTitle.vue
@@ -5,9 +5,14 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { BlockTitleClasses } from '../../shared/classes/BlockTitleClasses.js';
+
   import { BlockTitleColors } from '../../shared/colors/BlockTitleColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -42,6 +47,7 @@
       },
     },
     setup(props) {
+      const context = useContext();
       const colors = computed(() =>
         BlockTitleColors(props.colors || {}, useDarkClasses)
       );

diff --git a/src/vue/components/Breadcrumbs.vue b/src/vue/components/Breadcrumbs.vue
@@ -4,7 +4,9 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { BreadcrumbsClasses } from '../../shared/classes/BreadcrumbsClasses.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -32,6 +34,7 @@
       },
     },
     setup(props) {
+      const context = useContext();
       const c = useThemeClasses(props, () => BreadcrumbsClasses(props));
       return {
         c,

diff --git a/src/vue/components/BreadcrumbsCollapsed.vue b/src/vue/components/BreadcrumbsCollapsed.vue
@@ -8,9 +8,14 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { BreadcrumbsCollapsedClasses } from '../../shared/classes/BreadcrumbsCollapsedClasses.js';
+
   import { BreadcrumbsCollapsedColors } from '../../shared/colors/BreadcrumbsCollapsedColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -32,7 +37,8 @@
         type: Object,
       },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         BreadcrumbsCollapsedColors(props.colors, useDarkClasses)
       );

diff --git a/src/vue/components/BreadcrumbsItem.vue b/src/vue/components/BreadcrumbsItem.vue
@@ -5,9 +5,14 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { BreadcrumbsItemClasses } from '../../shared/classes/BreadcrumbsItemClasses.js';
+
   import { BreadcrumbsItemColors } from '../../shared/colors/BreadcrumbsItemColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -33,7 +38,8 @@
         default: false,
       },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         BreadcrumbsItemColors(props.colors, useDarkClasses)
       );

diff --git a/src/vue/components/BreadcrumbsSeparator.vue b/src/vue/components/BreadcrumbsSeparator.vue
@@ -6,6 +6,8 @@
 </template>
 <script>
   import { BreadcrumbsSeparatorClasses } from '../../shared/classes/BreadcrumbsSeparatorClasses.js';
+  import { useContext } from '../shared/use-context.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import ChevronIcon from './icons/ChevronIcon.vue';
 
@@ -27,6 +29,7 @@
       },
     },
     setup(props) {
+      const context = useContext();
       const c = useThemeClasses(props, () =>
         BreadcrumbsSeparatorClasses(props)
       );