fix(vue): useContext util

fixes #196

src/vue/components/Actions.vue

@@ -9,7 +9,7 @@
   import { useContext } from '../shared/use-context.js';
 
   import { ActionsClasses } from '../../shared/classes/ActionsClasses.js';
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-actions',
@@ -32,6 +32,7 @@
     emits: ['backdropclick'],
     setup(props, ctx) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const state = computed(() => (props.opened ? 'opened' : 'closed'));
 
       const c = useThemeClasses(props, () =>

src/vue/components/ActionsButton.vue

@@ -14,9 +14,9 @@
   import { useContext } from '../shared/use-context.js';
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import { useTheme } from '../shared/use-theme.js';
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
   import { ActionsButtonClasses } from '../../shared/classes/ActionsButtonClasses.js';
   import { ActionsButtonColors } from '../../shared/colors/ActionsButtonColors.js';
 
@@ -56,6 +56,8 @@
     },
     setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const rippleElRef = ref(null);
       const Component = computed(() => {
         let c = props.component;
@@ -74,7 +76,7 @@
         ActionsButtonColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const isDividers = computed(() =>
         typeof props.dividers === 'undefined'

src/vue/components/ActionsGroup.vue

@@ -7,7 +7,7 @@
   import { useContext } from '../shared/use-context.js';
   import { ActionsGroupClasses } from '../../shared/classes/ActionsGroupClasses.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-actions-group',
@@ -28,6 +28,7 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const c = useThemeClasses(props, () =>
         ActionsGroupClasses(props, ctx.attrs.class)
       );

src/vue/components/ActionsLabel.vue

@@ -9,8 +9,8 @@
 
   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 { darkClasses } from '../shared/use-dark-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import { useTheme } from '../shared/use-theme.js';
 
   export default {
@@ -35,13 +35,15 @@
       fontSizeIos: { type: String, default: 'text-sm' },
       fontSizeMaterial: { type: String, default: 'text-sm' },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         ActionsLabelColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const isDividers = computed(() =>
         typeof props.dividers === 'undefined'

src/vue/components/Badge.vue

@@ -8,7 +8,7 @@
   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';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-badge',
@@ -35,6 +35,7 @@
     },
     setup(props) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() => BadgeColors(props.colors || {}));
 
       const size = computed(() => (props.small ? 'sm' : 'md'));

src/vue/components/Block.vue

@@ -9,9 +9,9 @@
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { cls } from '../../shared/cls.js';
 
@@ -52,11 +52,13 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         BlockColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const isStrong = computed(() =>
         typeof props.strong === 'undefined'

src/vue/components/BlockFooter.vue

@@ -13,9 +13,9 @@
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-block-footer',
@@ -39,9 +39,11 @@
       insetIos: { type: Boolean, default: false },
       insetMaterial: { type: Boolean, default: false },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
-      const theme = useTheme(context);
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
+      const theme = useTheme({}, context);
       const isInset = computed(() =>
         typeof props.inset === 'undefined'
           ? theme.value === 'ios'

src/vue/components/BlockHeader.vue

@@ -13,9 +13,9 @@
 
   import { BlockHeaderColors } from '../../shared/colors/BlockHeaderColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-block-header',
@@ -41,7 +41,9 @@
     },
     setup(props) {
       const context = useContext();
-      const theme = useTheme(context);
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
+      const theme = useTheme({}, context);
       const isInset = computed(() =>
         typeof props.inset === 'undefined'
           ? theme.value === 'ios'

src/vue/components/BlockTitle.vue

@@ -11,9 +11,9 @@
 
   import { BlockTitleColors } from '../../shared/colors/BlockTitleColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-block-title',
@@ -48,6 +48,8 @@
     },
     setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         BlockTitleColors(props.colors || {}, useDarkClasses)
       );

src/vue/components/Breadcrumbs.vue

@@ -7,7 +7,7 @@
   import { useContext } from '../shared/use-context.js';
   import { BreadcrumbsClasses } from '../../shared/classes/BreadcrumbsClasses.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-breadcrumbs',
@@ -35,6 +35,7 @@
     },
     setup(props) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const c = useThemeClasses(props, () => BreadcrumbsClasses(props));
       return {
         c,

src/vue/components/BreadcrumbsCollapsed.vue

@@ -14,9 +14,9 @@
 
   import { BreadcrumbsCollapsedColors } from '../../shared/colors/BreadcrumbsCollapsedColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-breadcrumbs-collapsed',
@@ -37,8 +37,10 @@
         type: Object,
       },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         BreadcrumbsCollapsedColors(props.colors, useDarkClasses)
       );

src/vue/components/BreadcrumbsItem.vue

@@ -11,9 +11,9 @@
 
   import { BreadcrumbsItemColors } from '../../shared/colors/BreadcrumbsItemColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-breadcrumbs-item',
@@ -38,8 +38,10 @@
         default: false,
       },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         BreadcrumbsItemColors(props.colors, useDarkClasses)
       );

src/vue/components/BreadcrumbsSeparator.vue

@@ -8,7 +8,7 @@
   import { BreadcrumbsSeparatorClasses } from '../../shared/classes/BreadcrumbsSeparatorClasses.js';
   import { useContext } from '../shared/use-context.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import ChevronIcon from './icons/ChevronIcon.vue';
 
   export default {
@@ -30,6 +30,7 @@
     },
     setup(props) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const c = useThemeClasses(props, () =>
         BreadcrumbsSeparatorClasses(props)
       );

src/vue/components/Button.vue

@@ -18,11 +18,11 @@
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { ButtonClasses } from '../../shared/classes/ButtonClasses.js';
 
@@ -169,6 +169,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const rippleElRef = ref(null);
       const Component = computed(() => {
         let c = props.component;
@@ -183,7 +185,7 @@
 
       useTouchRipple(rippleElRef, props, { context });
 
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const isOutline = computed(() =>
         typeof props.outline === 'undefined'

src/vue/components/Card.vue

@@ -18,11 +18,11 @@
   import { computed } from 'vue';
   import { useContext } from '../shared/use-context.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { CardClasses } from '../../shared/classes/CardClasses.js';
 
@@ -63,11 +63,13 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         CardColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const isOutline = computed(() =>
         typeof props.outline === 'undefined'

src/vue/components/Checkbox.vue

@@ -31,9 +31,9 @@
 
   import { CheckboxColors } from '../../shared/colors/CheckboxColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
   import CheckboxIcon from './icons/CheckboxIcon.vue';
@@ -71,6 +71,8 @@
     emits: ['change'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
       const inputElRef = ref(null);
 

src/vue/components/Chip.vue

@@ -21,11 +21,11 @@
 
   import { ChipColors } from '../../shared/colors/ChipColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import DeleteIcon from './icons/DeleteIcon.vue';
 
   export default {
@@ -61,8 +61,10 @@
     emits: ['delete'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const style = computed(() => (props.outline ? 'outline' : 'fill'));
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const colors = computed(() =>
         ChipColors(props.colors || {}, useDarkClasses)