Merge branch 'feat/custom-elements-for-core-integration' into fix/cus…

…tomElements-not-defined

.eslintrc.js

@@ -77,6 +77,7 @@ module.exports = defineConfig({
     'vue/require-explicit-emits': 'off',
     'vue/multi-word-component-names': 'off',
     'vue/prefer-import-from-vue': 'off',
+    'vue/no-deprecated-slot-attribute': 'off',
 
     // prettier
     'prettier/prettier': 'error',

build/src/tasks/full-bundle.ts

@@ -36,7 +36,7 @@ async function buildFullEntry(minify: boolean) {
       PuikAlias(),
       vue({
         isProduction: true,
-        customElement: true,
+        customElement: /\.ce\.vue$/,
       }),
       postcss({
         config: {

packages/components/button-group/index.ts

@@ -1,8 +1,15 @@
+import { defineCustomElement } from 'vue'
 import { withInstall } from '@puik/utils'
 
 import ButtonGroup from './src/button-group.vue'
 
 export const PuikButtonGroup = withInstall(ButtonGroup)
-export default PuikButtonGroup
+export const PuikButtonGroupCe = defineCustomElement(PuikButtonGroup)
+
+if (!customElements.get('puik-button-group-ce')) {
+  customElements.define('puik-button-group-ce', PuikButtonGroupCe)
+}
 
 export * from './src/button-group'
+
+export default PuikButtonGroup

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

@@ -18,3 +18,8 @@ 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

@@ -1,8 +1,15 @@
+import { defineCustomElement } from 'vue'
 import { withInstall } from '@puik/utils'
 
 import Button from './src/button.vue'
 
 export const PuikButton = withInstall(Button)
-export default PuikButton
+export const PuikButtonCe = defineCustomElement(PuikButton)
+
+if (!customElements.get('puik-button-ce')) {
+  customElements.define('puik-button-ce', PuikButtonCe)
+}
 
 export * from './src/button'
+
+export default PuikButton

packages/components/button/src/button.vue

@@ -59,3 +59,8 @@ const setSelected = () => {
   }
 }
 </script>
+
+<style lang="scss">
+@use '../../../theme/src/base';
+@use '../../../theme/src/button.scss';
+</style>

packages/components/input/index.ts

@@ -1,8 +1,15 @@
+import { defineCustomElement } from 'vue'
 import { withInstall } from '@puik/utils'
 
 import Input from './src/input.vue'
 
 export const PuikInput = withInstall(Input)
-export default PuikInput
+export const PuikInputCe = defineCustomElement(PuikInput)
+
+if (!customElements.get('puik-input-ce')) {
+  customElements.define('puik-input-ce', PuikInputCe)
+}
 
 export * from './src/input'
+
+export default PuikInput

packages/components/input/src/input.ts

@@ -20,6 +20,21 @@ export const inputProps = buildProps({
     required: false,
     default: '',
   },
+  hasSlotAppend: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  hasSlotPrepend: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  hasSlotHint: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   type: {
     type: String as PropType<PuikInputType>,
     required: false,
@@ -45,6 +60,11 @@ export const inputProps = buildProps({
     required: false,
     default: undefined,
   },
+  hint: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   autocomplete: {
     type: String,
     required: false,

packages/components/input/src/input.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="puik-input">
     <div class="puik-input__wrapper" :class="inputClasses">
-      <div v-if="$slots.prepend" class="puik-input__prepend">
+      <div v-if="$slots.prepend || hasSlotPrepend" class="puik-input__prepend">
         <slot name="prepend"></slot>
       </div>
       <input
@@ -26,7 +26,10 @@
         @click="togglePasswordVisibility"
         >{{ passwordIsVisible ? 'visibility' : 'visibility_off' }}</span
       >
-      <div v-else-if="$slots.append" class="puik-input__append">
+      <div
+        v-else-if="$slots.append || hasSlotAppend"
+        class="puik-input__append"
+      >
         <slot name="append"></slot>
       </div>
       <puik-input-controls
@@ -36,13 +39,14 @@
         @decrease="decrease"
       ></puik-input-controls>
     </div>
-    <div v-if="$slots.hint || hasError" class="puik-input__hint">
+    <div v-if="$slots.hint || hasSlotHint || hasError" class="puik-input__hint">
       <span
         v-show="!hideHint"
-        v-if="$slots.hint && !hasError"
+        v-if="($slots.hint || hasSlotHint) && !hasError"
         class="puik-input__hint__text"
-        ><slot name="hint"></slot
-      ></span>
+      >
+        <slot name="hint"></slot>
+      </span>
       <div v-if="hasError" class="puik-input__hint__error">
         <puik-icon
           icon="error"
@@ -110,3 +114,8 @@ const value = computed<string | number>({
   },
 })
 </script>
+
+<style lang="scss">
+@use '../../../theme/src/base';
+@use '../../../theme/src/input.scss';
+</style>

packages/puik/component.ts

@@ -24,7 +24,10 @@ import { PuikBreadcrumb } from '@puik/components/breadcrumb'
 import { PuikAccordion, PuikAccordionGroup } from '@puik/components/accordion'
 import { PuikBadge } from '@puik/components/badge'
 import { PuikModal } from '@puik/components/modal'
-import { PuikButtonGroup } from '@puik/components/button-group'
+import {
+  PuikButtonGroup,
+  PuikButtonGroupCe,
+} from '@puik/components/button-group'
 import {
   PuikMenu,
   PuikMenuItem,
@@ -43,8 +46,8 @@ import { PuikSelect, PuikOption } from '@puik/components/select'
 import { PuikAlert } from '@puik/components/alert'
 import { PuikTooltip, PuikTooltipCe } from '@puik/components/tooltip'
 import { PuikSwitch } from '@puik/components/switch'
-import { PuikButton } from '@puik/components/button'
-import { PuikInput } from '@puik/components/input'
+import { PuikButton, PuikButtonCe } from '@puik/components/button'
+import { PuikInput, PuikInputCe } from '@puik/components/input'
 import { PuikConfigProvider } from '@puik/components/config-provider'
 import type { Plugin } from 'vue'
 
@@ -72,6 +75,7 @@ export default [
   PuikBadge,
   PuikModal,
   PuikButtonGroup,
+  PuikButtonGroupCe,
   PuikMenu,
   PuikMenuItem,
   PuikMenuItemSeparator,
@@ -85,6 +89,7 @@ export default [
   PuikLabel,
   PuikRadio,
   PuikInput,
+  PuikInputCe,
   PuikCheckbox,
   PuikOption,
   PuikSelect,
@@ -93,5 +98,6 @@ export default [
   PuikTooltipCe,
   PuikSwitch,
   PuikButton,
+  PuikButtonCe,
   PuikConfigProvider,
 ] as Plugin[]

packages/theme/src/icon.scss

@@ -1,3 +1,6 @@
 .puik-icon {
   @apply font-materialIcons;
 }
+.puik-icon.material-icons-round {
+  @apply flex;
+}

packages/theme/src/input.scss

@@ -1,4 +1,5 @@
 @use './common/typography.scss';
+
 .puik-input {
   @apply flex flex-col;
   &__wrapper {

packages/utils/index.ts

@@ -7,3 +7,4 @@ export * from './types'
 export * from './typescript'
 export * from './isEllipsisActive'
 export * from './clamp'
+export * from './v-custom-model'

packages/utils/v-custom-model.ts

@@ -0,0 +1,25 @@
+import type { App, Directive, DirectiveBinding } from 'vue'
+
+const directive: Directive = {
+  mounted(el: HTMLInputElement, binding: DirectiveBinding) {
+    el.addEventListener('input', (event) => {
+      if (event.target) {
+        binding.instance?.$emit(
+          binding.arg!,
+          (event.target as HTMLInputElement).value
+        )
+      }
+    })
+  },
+  beforeUnmount(el: HTMLInputElement) {
+    el.removeEventListener('input', () => {
+      console.log('before unmount')
+    })
+  },
+}
+
+export const vCustomModelDirective = {
+  install(app: App) {
+    app.directive('custom-model', directive)
+  },
+}