refactor: buttonCe and buttonGroupCe

packages/components/button-group/index.ts

@@ -2,9 +2,10 @@ import { defineCustomElement } from 'vue'
 import { withInstall } from '@puik/utils'
 
 import ButtonGroup from './src/button-group.vue'
+import ButtonGroupCe from './src/button-group.ce.vue'
 
 export const PuikButtonGroup = withInstall(ButtonGroup)
-export const PuikButtonGroupCe = defineCustomElement(PuikButtonGroup)
+export const PuikButtonGroupCe = defineCustomElement(withInstall(ButtonGroupCe))
 
 if (!customElements.get('puik-button-group-ce')) {
   customElements.define('puik-button-group-ce', PuikButtonGroupCe)

packages/components/button-group/src/button-group.ce.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="puik-button-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { buttonGroupProps, ButtonGroupKey } from './button-group'
+
+defineOptions({
+  name: 'PuikButtonGroup',
+})
+
+const props = defineProps(buttonGroupProps)
+const selected = useVModel(props, 'modelValue')
+
+provide(ButtonGroupKey, { selected })
+</script>
+
+<style lang="scss">
+@use '../../../theme/src/base';
+@use '../../../theme/src/button-group.scss';
+</style>

packages/components/button/index.ts

@@ -2,9 +2,10 @@ import { defineCustomElement } from 'vue'
 import { withInstall } from '@puik/utils'
 
 import Button from './src/button.vue'
+import ButtonCe from './src/button.ce.vue'
 
 export const PuikButton = withInstall(Button)
-export const PuikButtonCe = defineCustomElement(PuikButton)
+export const PuikButtonCe = defineCustomElement(withInstall(ButtonCe))
 
 if (!customElements.get('puik-button-ce')) {
   customElements.define('puik-button-ce', PuikButtonCe)

packages/components/button/src/button.ce.vue

@@ -0,0 +1,66 @@
+<template>
+  <component
+    :is="componentType"
+    v-bind="pathProp"
+    class="puik-button"
+    :class="[
+      `puik-button--${variant}`,
+      `puik-button--${size}`,
+      { 'puik-button--disabled': disabled },
+      { 'puik-button--fluid': fluid },
+    ]"
+    :disabled="disabled"
+    @click="setSelected"
+  >
+    <puik-icon
+      v-if="leftIcon"
+      :icon="leftIcon"
+      :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
+      class="puik-button__left-icon"
+    />
+    <slot></slot>
+    <puik-icon
+      v-if="rightIcon"
+      :icon="rightIcon"
+      :font-size="size !== 'sm' ? '1.25rem' : '1rem'"
+      class="puik-button__right-icon"
+    />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { PuikIcon } from '@puik/components/icon'
+import { ButtonGroupKey } from '../../button-group'
+import { buttonProps } from './button'
+defineOptions({
+  name: 'PuikButton',
+})
+
+const props = defineProps(buttonProps)
+const buttonGroup = inject(ButtonGroupKey, undefined)
+
+const componentType = computed(() => {
+  if (props.to) {
+    return 'router-link'
+  } else if (props.href) {
+    return 'a'
+  }
+  return 'button'
+})
+
+const pathProp = computed(() =>
+  props.to ? { to: props.to } : { href: props.href }
+)
+
+const setSelected = () => {
+  if (buttonGroup && props.value) {
+    buttonGroup.selected.value = props.value
+  }
+}
+</script>
+
+<style lang="scss">
+@use '../../../theme/src/base';
+@use '../../../theme/src/button.scss';
+</style>