-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(kpop): component reskin [KHCP-8994] (#2176)
* chore(sandbox): setup component sandbox [KHCP-8994] * feat(kpop): reskin component props [KHCP-8994] * fix(*): update kpop usage [KHCP-8994] * chore(sandbox): minor fix [KHCP-8994] * chore(sandbox): another fix [KHCP-8994] * feat(kpop): reskin slots [KHCP-8994] * feat(kpop): refactor component styles [KHCP-8994] * fix(*): update kpop selectors [KHCP-8994] * test(kpop): fix component test [KHCP-8994] * feat(kpop): add close button [KHCP-8994] * fix(*): update kpop usage [KHCP-8994] * docs(popover): trigger release [KHCP-8994] * fix(kpop): misc fixes [KHCP-8994] * docs(kpop): update component docs [KHCP-8994] * docs(kpop): minor tweak [KHCP-8994] * docs: minor fix [KHCP-8994] * fix(kpop): address pr feedback [KHCP-8994] * fix(kpop): apply pr feedback Co-authored-by: Kai Arrowood <kai.arrowood@konghq.com> * fix(kpop): misc fixes [KHCP-8994] * docs(kpop): add custom trigger note [KHCP-8994] * fix(kpop): minor fix [KHCP-8994] * docs(kpop): apply pr feedback Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> * docs(kpop): add ktooltip link [KHCP-8994] * docs(kpop): add example [KHCP-8994] * docs(kpop): minor fix [KHCP-8994] * docs(kpop): apply pr feedback Co-authored-by: Kai Arrowood <kai.arrowood@konghq.com> --------- Co-authored-by: Kai Arrowood <kai.arrowood@konghq.com> Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
- Loading branch information
3 people
committed
Jun 15, 2024
1 parent
acfe536
commit a41a056
Showing
17 changed files
with
986 additions
and
883 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,291 @@ | ||
| <template> | ||
| <SandboxLayout | ||
| :links="inject('app-links', [])" | ||
| title="KPop" | ||
| > | ||
| <div class="kpop-sandbox"> | ||
| <SandboxSectionComponent> | ||
| <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1470%3A3448&mode=dev&t=qJAFUBmW2m9dkFvT-1"> | ||
| Figma | ||
| </KExternalLink> | ||
| </SandboxSectionComponent> | ||
|
|
||
| <!-- Props --> | ||
| <SandboxTitleComponent | ||
| is-subtitle | ||
| title="Props" | ||
| /> | ||
| <SandboxSectionComponent title="buttonText"> | ||
| <KPop button-text="KPop Button"> | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="tag"> | ||
| <KPop | ||
| button-text="Button" | ||
| tag="section" | ||
| > | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="title"> | ||
| <KPop | ||
| button-text="Button" | ||
| title="Popover title" | ||
| > | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="trigger"> | ||
| <KPop | ||
| button-text="Button" | ||
| trigger="hover" | ||
| > | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="placement"> | ||
| <div class="vertical-container"> | ||
| <KPop | ||
| v-for="placement in PopPlacementsArray" | ||
| :key="placement" | ||
| :button-text="placement" | ||
| :placement="placement" | ||
| > | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </div> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="width"> | ||
| <KPop | ||
| button-text="Button" | ||
| width="500" | ||
| > | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="maxWidth"> | ||
| <KPop | ||
| button-text="Button" | ||
| max-width="100" | ||
| > | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="popoverTimeout"> | ||
| <KPop | ||
| button-text="Button" | ||
| :popover-timeout="3000" | ||
| trigger="hover" | ||
| > | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="hidePopover"> | ||
| <p> | ||
| <span v-if="!hidingPopover">Hide popover: <code>false</code></span> | ||
| <span v-else>Hiding popover in: {{ timeoutValue }}</span> | ||
| </p> | ||
| <KPop :hide-popover="showPopover"> | ||
| <KButton @click="startPopoverTimeout"> | ||
| Button | ||
| </KButton> | ||
|
|
||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="disabled"> | ||
| <KPop | ||
| button-text="Button" | ||
| disabled | ||
| > | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent | ||
| title="hideCaret" | ||
| > | ||
| <KPop | ||
| button-text="Button" | ||
| hide-caret | ||
| > | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="hideCloseIcon"> | ||
| <KComponent | ||
| v-slot="{ data }" | ||
| :data="{ hideCloseIcon: false }" | ||
| > | ||
| <KInputSwitch | ||
| v-model="data.hideCloseIcon" | ||
| label="Hide close icon" | ||
| /> | ||
|
|
||
| <KPop | ||
| button-text="Button" | ||
| :hide-close-icon="data.hideCloseIcon" | ||
| > | ||
| <template #content> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
| </template> | ||
| </KPop> | ||
| </KComponent> | ||
| </SandboxSectionComponent> | ||
|
|
||
| <!-- Slots --> | ||
| <SandboxTitleComponent | ||
| is-subtitle | ||
| title="Slots" | ||
| /> | ||
| <SandboxSectionComponent title="default"> | ||
| <KPop> | ||
| <KButton appearance="secondary"> | ||
| Slotted button | ||
| </KButton> | ||
|
|
||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="title & content"> | ||
| <KPop button-text="Button"> | ||
| <template #title> | ||
| Popover title | ||
| </template> | ||
|
|
||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="footer"> | ||
| <KPop button-text="Button"> | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
|
|
||
| <template #footer> | ||
| <KButton size="small"> | ||
| Footer button | ||
| </KButton> | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
|
|
||
| <!-- Events --> | ||
| <SandboxTitleComponent | ||
| is-subtitle | ||
| title="Events" | ||
| /> | ||
| <SandboxSectionComponent title="open & close"> | ||
| <KPop | ||
| button-text="Button" | ||
| @close="onEvent('Popover closed')" | ||
| @open="onEvent('Popover opened')" | ||
| > | ||
| <template #content> | ||
| Popover content. | ||
| </template> | ||
| </KPop> | ||
| </SandboxSectionComponent> | ||
| <SandboxSectionComponent title="popover-click"> | ||
| <KComponent | ||
| v-slot="{ data }" | ||
| :data="{ closeOnPopoverClick: false }" | ||
| > | ||
| <KInputSwitch | ||
| v-model="data.closeOnPopoverClick" | ||
| label="Close on popover click" | ||
| /> | ||
| <KPop | ||
| button-text="Button" | ||
| :close-on-popover-click="data.closeOnPopoverClick" | ||
| @close="onEvent('Popover closed')" | ||
| @open="onEvent('Popover opened')" | ||
| @popover-click="onEvent('Popover clicked')" | ||
| > | ||
| <template #content> | ||
| <KButton | ||
| size="small" | ||
| @click="onEvent('Popover content clicked')" | ||
| > | ||
| Click here | ||
| </KButton> | ||
| </template> | ||
| </KPop> | ||
| </KComponent> | ||
| </SandboxSectionComponent> | ||
| </div> | ||
| </SandboxLayout> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { inject, nextTick, ref, watch } from 'vue' | ||
| import SandboxTitleComponent from '../components/SandboxTitleComponent.vue' | ||
| import SandboxSectionComponent from '../components/SandboxSectionComponent.vue' | ||
| import { PopPlacementsArray } from '@/types' | ||
| const hidingPopover = ref<boolean>(false) | ||
| const interval = ref<any>(null) | ||
| const showPopover = ref<boolean>(true) | ||
| const timeoutValue = ref<number>(3) | ||
| const startPopoverTimeout = () => { | ||
| hidingPopover.value = true | ||
| setTimeout(() => { | ||
| showPopover.value = false | ||
| }, 3000) | ||
| interval.value = setInterval(() => { | ||
| timeoutValue.value -= 1 | ||
| }, 1000) | ||
| } | ||
| watch(showPopover, async (value) => { | ||
| if (!value) { | ||
| await nextTick() | ||
| clearInterval(interval.value) | ||
| hidingPopover.value = false | ||
| showPopover.value = true | ||
| timeoutValue.value = 3 | ||
| interval.value = null | ||
| } | ||
| }) | ||
| const onEvent = (message: string): void => { | ||
| console.log(message) | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .vertical-container { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: $kui-space-50; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.