feat(kinlineedit): update for vue 3

docs/.vuepress/config.ts

@@ -89,6 +89,7 @@ export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
               '/components/checkbox',
               '/components/empty-state',
               '/components/icon',
+              '/components/inline-edit',
               '/components/input',
               '/components/label',
               '/components/modal',

docs/components/inline-edit.md

@@ -0,0 +1,151 @@
+# Inline Edit
+
+**KInlineEdit** - A wrapper which adds inline edit capability. Currently only supports single text input.
+
+<KComponent :data="{ inlineText: 'Click to edit me' }" v-slot="{ data }">
+  <KInlineEdit @changed="newVal => data.inlineText = newVal"><h3>{{ data.inlineText }}</h3></KInlineEdit>
+</KComponent>
+
+> The `KComponent` component is used in this example to create state.
+
+```vue
+<KComponent :data="{ inlineText: 'Click to edit me' }" v-slot="{ data }">
+  <KInlineEdit>
+    <h3>{{ data.inlineText }}</h3>
+  </KInlineEdit>
+</KComponent>
+```
+
+## Props
+
+### ignoreValue
+
+If true, will not set the value of the input when enabled/clicked. This is useful to control placeholder style text
+
+<KComponent :data="{ inlineText: '' }" v-slot="{ data }">
+  <KInlineEdit :ignore-value="data.inlineText.length === 0" @changed="newVal => data.inlineText = newVal"><p>{{ data.inlineText || 'cool placeholder' }}</p></KInlineEdit>
+</KComponent>
+
+> The `KComponent` component is used in this example to create state.
+
+```vue
+<KComponent :data="{ inlineText: '' }" v-slot="{ data }">
+  <KInlineEdit
+    :ignore-value="data.inlineText.length === 0"
+    @changed="newVal => data.inlineText = newVal">
+    <p>{{ data.inlineText || 'cool placeholder' }}</p>
+  </KInlineEdit>
+</KComponent>
+```
+
+### styleOverrides
+
+Styles to set when the input is active. Useful when styling the default state differently.
+
+<KComponent :data="{ inlineText: '' }" v-slot="{ data }">
+  <KInlineEdit :ignore-value="data.inlineText.length === 0" :style-overrides="{color: 'var(--black-85)'}" @changed="newVal => data.inlineText = newVal"><p :class="data.inlineText.length > 0 ? 'color-black-85' :'color-black-45 text-italic'">{{ data.inlineText || 'cool placeholder' }}</p></KInlineEdit>
+</KComponent>
+
+> The `KComponent` component is used in this example to create state.
+
+```vue
+<KComponent :data="{ inlineText: '' }" v-slot="{ data }">
+  <KInlineEdit
+    :ignore-value="data.inlineText.length === 0"
+    :style-overrides="{ color: 'var(--black-85)' }"
+    @changed="newVal => data.inlineText = newVal">
+    <p :class="data.inlineText.length > 0 ? 'color-black-85' :'color-black-45 text-italic'">
+      {{ data.inlineText || 'cool placeholder' }}
+    </p>
+  </KInlineEdit>
+</KComponent>
+```
+
+## Events
+
+### `@changed`
+
+Emitted blurred away from the editing input or when enter is pressed.
+
+When clicking out of the input `@changed` will fire and emit the value. Can be used to reset the outside data.
+
+:::tip
+While the component itself does not protect against returning empty an empty value, it is advised to do a check at the implementation layer to ensure empty & validation are accounted for.
+:::
+
+<KCard>
+  <template v-slot:body>
+    <KComponent :data="{ inlineText: 'Click to edit me' }" v-slot="{ data }">
+      <div>
+        Updated: {{ data.inlineText }}
+        <KInlineEdit @changed="newVal => { if(newVal.length) { data.inlineText = newVal } else { alert('cannot be empty') } }">
+          <h3>{{ data.inlineText }}</h3>
+        </KInlineEdit>
+      </div>
+    </KComponent>
+  </template>
+</KCard>
+
+> The `KComponent` component is used in this example to create state.
+
+```vue
+<KComponent :data="{ inlineText: 'Click to edit me' }" v-slot="{ data }">
+  <div>
+    Updated: {{ data.inlineText }}
+    <KInlineEdit @changed="newVal => { if(newVal.length) { data.inlineText = newVal } else { alert('cannot be empty') } }">
+      <h3>{{ data.inlineText }}</h3>
+    </KInlineEdit>
+  </div>
+</KComponent>
+```
+
+## Slots
+
+- `default` - Content to be edited
+
+:::warning
+An HTML element must be passed in the slot. An error will be thrown if not passed.
+
+```vue
+<!-- good -->
+<KInlineEdit>
+  <p>Some text</p>
+</KInlineEdit>
+
+<!-- bad -->
+<KInlineEdit>
+  Some text
+</KInlineEdit>
+```
+
+:::
+
+## Theming
+
+:lipstick: To theme, reference [KInput](/components/input.html#theming). The input takes up 100% of its parent container. To change, add a class or width styling to the wrapping component.
+
+<KComponent :data="{ inlineText: 'Im 50%!' }" v-slot="{ data }">
+  <KInlineEdit class="w-50" @changed="newVal => data.inlineText = newVal"><h3>{{ data.inlineText }}</h3></KInlineEdit>
+</KComponent>
+
+```vue
+<KInlineEdit
+  class="w-50"
+  @changed="newVal => text = newVal">
+  <h3>{{ text }}</h3>
+</KInlineEdit>
+```
+
+<script>
+export default {
+  methods: {
+    alert(msg) {
+      window.alert(msg)
+    }
+  }
+}
+</script>
+
+<style>
+.text-italic { font-style: italic; }
+</style>

docs/components/pagination.md

@@ -44,7 +44,7 @@ Prop is a Number. If the value is not set, the first one of the available pageSi
 
 Optional array of items that can be provided for easy pagination. Slice of this array with visible items is returned as `visibleItems` inside the `pageChanged` event.
 
-<Komponent :data="{ letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], visibleLetters: ['a', 'b', 'c']}" v-slot="{ data }">
+<KComponent :data="{ letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], visibleLetters: ['a', 'b', 'c']}" v-slot="{ data }">
   <div>
     <span><b>Visible letters: </b></span>
     <span v-for="number in data.visibleLetters">{{ number }} </span>
@@ -54,7 +54,7 @@ Optional array of items that can be provided for easy pagination. Slice of this
       :pageSizes="[3]"
       @pageChanged="({visibleItems}) => data.visibleLetters = visibleItems"/>
   </div>
-</Komponent>
+</KComponent>
 
 ```vue
 <template>
@@ -100,13 +100,13 @@ A number that sets the neighboring pages visible to the left and right of the ce
 
 Restrict navigation to only `previous` / `next` page. Defaults to `false`.
 
-<Komponent :data="{ letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], visibleLetters: ['a', 'b', 'c']}" v-slot="{ data }">
+<KComponent :data="{ letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], visibleLetters: ['a', 'b', 'c']}" v-slot="{ data }">
   <div>
     <span><b>Visible letters: </b></span>
     <span v-for="number in data.visibleLetters">{{ number }} </span>
     <KPagination :items="data.letters" :totalCount="data.letters.length" :pageSizes="[3]" :disablePageJump="true" @pageChanged="({visibleItems}) => data.visibleLetters = visibleItems"/>
   </div>
-</Komponent>
+</KComponent>
 
 ```vue
 <template>
@@ -143,7 +143,7 @@ export default defineComponent({
 
 Manually control the current page instead of using native handling. If using this prop you MUST keep it up-to-date using the `@pageChanged` event in order to remain reactive to clicking the prev, next, and specific page buttons.
 
-<Komponent :data="{ letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], visibleLetters: ['d', 'e', 'f'], currPage: 2}" v-slot="{ data }">
+<KComponent :data="{ letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], visibleLetters: ['d', 'e', 'f'], currPage: 2}" v-slot="{ data }">
   <div>
     <span><b>Visible letters: </b></span>
     <span v-for="number in data.visibleLetters">{{ number }} </span>
@@ -154,7 +154,7 @@ Manually control the current page instead of using native handling. If using thi
       :currentPage="data.currPage"
       @pageChanged="({visibleItems, page}) => { data.visibleLetters = visibleItems; data.currPage = page }"/>
   </div>
-</Komponent>
+</KComponent>
 
 ```vue
 <template>
@@ -215,7 +215,7 @@ export default defineComponent({
 
 ### Example
 
-<Komponent :data="{ names: ['Alice', 'Bob', 'Charlie', 'Derek', 'Ellie', 'Frank', 'George', 'Helen', 'Ingrid'], visibleNames: ['Alice', 'Bob', 'Charlie'], page: 1}" v-slot="{ data }">
+<KComponent :data="{ names: ['Alice', 'Bob', 'Charlie', 'Derek', 'Ellie', 'Frank', 'George', 'Helen', 'Ingrid'], visibleNames: ['Alice', 'Bob', 'Charlie'], page: 1}" v-slot="{ data }">
   <div>
     <KCard title="Cool names list" class="mb-4">
       <template #body>
@@ -231,7 +231,7 @@ export default defineComponent({
     :pageSizes="[3, 4, 5]"
     @pageChanged="({visibleItems}) => data.visibleNames = visibleItems"/>
   </div>
-</Komponent>
+</KComponent>
 
 ```vue
 <template>

docs/components/select.md

@@ -296,7 +296,7 @@ Use fixed positioning of the popover to avoid content being clipped by parental
 
 KSelect works as regular inputs do using v-model for data binding:
 
-<Komponent :data="{ myVal: 'test' }" v-slot="{ data }">
+<KComponent :data="{ myVal: 'test' }" v-slot="{ data }">
   <div>
     <KLabel>Value:</KLabel> {{ data.myVal }}
     <KSelect width="100" v-model="data.myVal" :items="[{
@@ -308,10 +308,10 @@ KSelect works as regular inputs do using v-model for data binding:
       }]"
     />
   </div>
-</Komponent>
+</KComponent>
 
 ```html
-<Komponent :data="{myVal: 'test'}" v-slot="{ data }">
+<KComponent :data="{myVal: 'test'}" v-slot="{ data }">
   <div>
     <KLabel>Value:</KLabel> {{ data.myVal }}
     <KSelect width="100" v-model="data.myVal" :items="[{
@@ -323,7 +323,7 @@ KSelect works as regular inputs do using v-model for data binding:
       }]"
     />
   </div>
-</Komponent>
+</KComponent>
 ```
 
 ## Attribute Binding

docs/components/skeleton.md

@@ -20,26 +20,26 @@ There are 5 different types of loading states that KSkeleton supports: Card, Tab
 
 The number of milliseconds to wait before showing the skeleton state. Defaults to 750.
 
-<Komponent :data="{ isLoading: false }" v-slot="{ data }">
+<KComponent :data="{ isLoading: false }" v-slot="{ data }">
   <div>
     <KButton class="mb-2" @click="()=>(data.isLoading=!data.isLoading)">Toggle loading - {{data.isLoading?'on':'off'}}</KButton>
       <div v-if="!data.isLoading">
         <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
       </div>
       <KSkeleton v-else="data.isLoading" />
   </div>
-</Komponent>
+</KComponent>
 
 ```vue
-<Komponent :data="{ isLoading: false }" v-slot="{ data }">
+<KComponent :data="{ isLoading: false }" v-slot="{ data }">
   <div>
     <KButton class="mb-2" @click="()=>(data.isLoading=!data.isLoading)">Toggle loading - {{data.isLoading?'on':'off'}}</KButton>
       <div v-if="!data.isLoading">
         <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
       </div>
       <KSkeleton v-else="data.isLoading" />
   </div>
-</Komponent>
+</KComponent>
 ```
 
 ## Generic Loading State

docs/components/textarea.md

@@ -90,20 +90,20 @@ Use this prop to remove the character limit on the textarea. Defaults to `false`
 
 `KTextArea` works as regular texarea do using v-model for data binding:
 
-<Komponent :data="{myInput: 'hello'}" v-slot="{ data }">
+<KComponent :data="{myInput: 'hello'}" v-slot="{ data }">
   <div>
     {{ data.myInput }}
     <KTextArea
       v-model="data.myInput"
       @blur="e => (data.myInput = 'blurred')" />
   </div>
-</Komponent>
+</KComponent>
 
 ```vue
-<Komponent :data="{myInput: 'hello'}" v-slot="{ data }">
+<KComponent :data="{myInput: 'hello'}" v-slot="{ data }">
   {{ myInput }}
   <KTextArea v-model="data.myInput" />
-</Komponent>
+</KComponent>
 ```
 
 ## Events
@@ -124,26 +124,26 @@ Use this prop to remove the character limit on the textarea. Defaults to `false`
 
 `KTextArea` also transparently binds to events:
 
-<Komponent :data="{myInput: 'hello'}" v-slot="{ data }">
+<KComponent :data="{myInput: 'hello'}" v-slot="{ data }">
   <div>
     <KTextArea
       v-model="data.myInput"
       @blur="e => (data.myInput = 'blurred')"
       @focus="e => (data.myInput = 'focused')"
     />
   </div>
-</Komponent>
+</KComponent>
 
 ```vue
-<Komponent :data="{myInput: 'hello'}" v-slot="{ data }">
+<KComponent :data="{myInput: 'hello'}" v-slot="{ data }">
   <div>
     <KTextArea
       v-model="data.myInput"
       @blur="e => (data.myInput = 'blurred')"
       @focus="e => (data.myInput = 'focused')"
     />
   </div>
-</Komponent>
+</KComponent>
 ```
 
 ## Theming