@privyid/persona 1.1.2 → 1.2.0

package/dist/components/contextual-bar/index.md

@@ -0,0 +1,362 @@
+---
+title: Contextual Bar · Components
+description: App-level notification bar.
+---
+
+<script setup>
+import pContextualBar from './ContextualBar.vue'
+import pButton from '../button/Button.vue'
+import { ref, onMounted } from "vue-demi"
+import IconInfo from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
+
+const sample1 = ref(false)
+
+const sample01 = ref(true)
+const sample02 = ref(true)
+const sample03 = ref(true)
+const sample04 = ref(true)
+const sample05 = ref(true)
+const sample06 = ref(true)
+const sample07 = ref(true)
+const sample08 = ref(true)
+const sample09 = ref(true)
+const sample10 = ref(true)
+const sample11 = ref(true)
+const sample12 = ref(true)
+
+onMounted (() => {
+  document.body?.style.removeProperty('transform')
+})
+</script>
+
+<style lang="postcss">
+  .preview {
+    &--bar {
+      .contextual-bar {
+        @apply static translate-y-0 z-0 !important;
+
+        &__wrapper {
+          @apply px-6 !important;
+        }
+      }
+    }
+
+    &--hide {
+      @apply border-transparent dark:border-transparent bg-transparent dark:bg-transparent bg-none p-0;
+
+      :deep(.preview__label) {
+        @apply hidden;
+      }
+    }
+  }
+
+  @media screen(md) {
+    .contextual-bar__body--active {
+      .VPNav,
+      .VPSidebar {
+        --vp-layout-top-height: var(--p-contextual-bar-height, 0px);
+      }
+    }
+  }
+</style>
+
+# Contextual Bar
+
+> App-level notification bar.
+
+## Usage
+
+### Simple Usage
+
+<preview class="preview--bar">
+  <p-contextual-bar v-model="sample01" title="Hey! This is Title Text and telling less" />
+</preview>
+
+```vue
+<template>
+  <p-contextual-bar
+    v-model="sample"
+    title="Hey! This is Title Text and telling less" />
+</template>
+```
+
+### With Icon
+
+<preview class="flex-col space-y-3 preview--bar">
+  <p-contextual-bar title="Hey! This is Title Text and telling less">
+    <template #icon>
+      <IconInfo />
+    </template>
+  </p-contextual-bar>
+  <p-contextual-bar title="Hey! This is Title Text and telling less">
+    <template #icon>
+      <img src="../avatar/assets/avatar.png" />
+    </template>
+  </p-contextual-bar>
+</preview>
+
+```vue
+<template>
+  <p-contextual-bar v-model="sample" title="Hey! This is Title Text and telling less">
+    <template #icon>
+      <IconInfo />
+    </template>
+  </p-contextual-bar>
+  <p-contextual-bar v-model="sample" title="Hey! This is Title Text and telling less">
+    <template #icon>
+      <img src="../avatar/assets/avatar.png" />
+    </template>
+  </p-contextual-bar>
+</template>
+
+<script setup>
+import IconInfo from '@privyid/persona-icon/vue/information-circle-solid/20.vue'
+</script>
+```
+
+### With Action Button
+
+<preview class="preview--bar">
+  <p-contextual-bar title="Hey! This is Title Text" v-model="sample02">
+    <template #icon>
+      <IconInfo />
+    </template>
+    <template #action>
+      <p-button size="sm" color="info">Button text</p-button>
+    </template>
+  </p-contextual-bar>
+</preview>
+
+```vue
+<template>
+  <p-contextual-bar v-model="sample" title="Hey! This is Title Text">
+    <template #action>
+      <p-button size="sm" color="info">Button text</p-button>
+    </template>
+  </p-contextual-bar>
+</template>
+```
+### With Two Action
+
+<preview class="preview--bar">
+  <p-contextual-bar title="This is Title Text" v-model="sample03">
+    <template #action>
+      <p-button size="sm" color="info">Button</p-button>
+      <p-button size="sm" color="info" variant="outline">Button</p-button>
+    </template>
+  </p-contextual-bar>
+</preview>
+
+```vue
+<template>
+  <p-contextual-bar v-model="sample" message="This is Title Text">
+    <template #action>
+      <p-button size="sm" color="info">Button</p-button>
+      <p-button size="sm" color="info" variant="outline">Button</p-button>
+    </template>
+  </p-contextual-bar>
+</template>
+```
+
+### Additional Description
+
+<preview class="preview--bar">
+  <p-contextual-bar v-model="sample04" title="Hey! This is Title Text" message="You will be unable to sign or seal a document">
+  </p-contextual-bar>
+</preview>
+
+```vue
+<template>
+  <p-contextual-bar
+    v-model="sample"
+    title="Hey! This is Title Text"
+    message="You will be unable to sign or seal a document" />
+</template>
+```
+
+### Additional Description With Action
+
+<preview class="preview--bar">
+  <p-contextual-bar
+    v-model="sample05"
+    title="Hey! This is Title Text"
+    message="You will be unable to sign or seal a document">
+    <template #action>
+      <p-button color="info" size="sm">Button</p-button>
+    </template>
+  </p-contextual-bar>
+</preview>
+
+```vue
+<template>
+  <p-contextual-bar
+    v-model="sample"
+    title="Hey! This is Title Text"
+    message="You will be unable to sign or seal a document">
+    <template #action>
+      <p-button color="info" size="sm">Button</p-button>
+    </template>
+  </p-contextual-bar>
+</template>
+```
+
+### Custom Background Image
+
+<preview class="preview--bar">
+  <p-contextual-bar
+    title="Hey! This is Title Text"
+    message="You will be unable to sign or seal a document"
+    background-url="../../public/assets/images/img-contextualbar-bg.svg">
+    <template #icon>
+      <img src="../../public/assets/images/user.png" />
+    </template>
+  </p-contextual-bar>
+</preview>
+
+```vue
+<template>
+  <p-contextual-bar
+    v-model="sample"
+    title="Hey! This is Title Text"
+    message="You will be unable to sign or seal a document"
+    background-url="/assets/images/img-contextualbar-bg.svg">
+    <template #icon>
+      <img src="../avatar/assets/avatar.png" />
+    </template>
+  </p-contextual-bar>
+</template>
+```
+
+## Fixed
+Contextual Bar have fixed position that can be setup by using `fixed` prop.
+
+```vue
+<template>
+  <p-contextual-bar
+    v-model="model"
+    color="light"
+    title="Hey! This is Title Text and telling less as possible"
+    background-url="../../public/assets/images/img-contextualbar-bg.svg"
+    fixed>
+    <template #icon>
+      <img src="../avatar/assets/avatar.png" />
+    </template>
+    <template #action>
+      <p-button
+        size="sm"
+        color="secondary" variant="link">Cancel</p-button>
+      <p-button size="sm" color="info">Button Text</p-button>
+    </template>
+    <template #message>
+      You will be unable to sign or seal a
+      document while your privy balance runs out.
+    </template>
+  </p-contextual-bar>
+</template>
+```
+
+<div class="pt-5">
+  <p-button @click="sample1 = !sample1" color="info">{{ sample1 ? 'End preview' : 'Live preview' }}</p-button>
+</div>
+
+## State
+Contextual Bar have 4 state variants: `error`, `warning`, `info` and `neutral`. Default is `info`
+
+<preview class="flex-col space-y-4 preview--bar">
+  <p-contextual-bar state="error" v-model="sample06" title="Hey! This is Title Text and telling less" />
+  <p-contextual-bar state="warning" v-model="sample07" title="Hey! This is Title Text and telling less" />
+  <p-contextual-bar state="info" title="Hey! This is Title Text and telling less" />
+  <p-contextual-bar state="neutral" title="Hey! This is Title Text and telling less" />
+</preview>
+
+```vue
+<template>
+  <p-contextual-bar
+    state="error"
+    v-model="sample" title="Hey! This is Title Text and telling less" />
+  <p-contextual-bar
+    state="warning"
+    v-model="sample" title="Hey! This is Title Text and telling less" />
+  <p-contextual-bar
+    state="info"
+    v-model="sample" title="Hey! This is Title Text and telling less" />
+  <p-contextual-bar
+    state="neutral"
+    v-model="sample" title="Hey! This is Title Text and telling less" />
+</template>
+```
+
+## Alignment
+
+To align Contextual Bar content, use align prop. Available value are `left`, `right` and `center`
+
+<preview class="flex-col space-y-4 preview--bar">
+  <p-contextual-bar align="left" v-model="sample10" title="Hey! This is Title Text" />
+  <p-contextual-bar align="center" v-model="sample11" title="Hey! This is Title Text" />
+  <p-contextual-bar align="right" v-model="sample12" title="Hey! This is Title Text" />
+</preview>
+
+```vue
+<template>
+  <p-contextual-bar
+    align="left"
+    v-model="sample" title="Hey! This is Title Text" />
+  <p-contextual-bar
+    align="center"
+    v-model="sample" title="Hey! This is Title Text" />
+  <p-contextual-bar
+    align="right"
+    v-model="sample" title="Hey! This is Title Text" />
+</template>
+```
+
+<preview class="preview--hide">
+  <p-contextual-bar
+    v-model="sample1"
+    color="light"
+    title="Hey! This is Title Text and telling less as possible"
+    background-url="../../public/assets/images/img-contextualbar-bg.svg"
+    fixed>
+    <template #icon>
+      <img src="../../public/assets/images/user.png" />
+    </template>
+    <template #action>
+      <p-button size="sm" color="secondary" variant="link">Cancel</p-button>
+      <p-button size="sm" color="info">Button Text</p-button>
+    </template>
+    <template #message>
+      You will be unable to sign or seal a document while your privy balance runs out.
+    </template>
+  </p-contextual-bar>
+</preview>
+
+## API
+
+### Props
+
+| Props                 |   Type    | Default | Description                                                                           |
+|-----------------------|:---------:|:-------:|---------------------------------------------------------------------------------------|
+| `state`               | `String`  | `info`  | Contextualbar state variants, valid value is `error`, `warning`, `info` and `neutral` |
+| `align`               | `String`  | `left`  | Contextualbar alignment, valid value is `left`, `center` and `right`                  |
+| `dismissable`         | `Boolean` | `true`  | Show / Hide dismiss button                                                            |
+| `title`               | `String`  |    -    | Content or title inside of Contextualbar                                              |
+| `message`             | `String`  |    -    | Additional message of Contextualbar                                                   |
+| `background-url`      | `String`  |    -    | Custom background image of Contextualbar                                              |
+| `background-dark-url` | `String`  |    -    | Custom background image of Contextualbar in Dark Mode                                 |
+| `fixed`               | `Boolean` |   false | Activate fixed Contextualbar                                                          |
+
+### Slots
+| Name       | Description                                          |
+|------------|------------------------------------------------------|
+| `title `   | Title content to place in Contextualbar              |
+| `message ` | Additional message content to place in Contextualbar |
+| `icon `    | Content to place icon in Contextualbar               |
+| `action `  | Content to place button in Contextualbar             |
+
+### Events
+
+| Name    | Arguments | Description                     |
+|---------|-----------|---------------------------------|
+| `close` | -         | Event when close button clicked |
+| `show`  | -         | Event Contextualbar shown       |
+| `hide`  | -         | Event Contextualbar hidden      |

package/dist/components/contextual-bar/sample.md

@@ -0,0 +1,96 @@
+---
+layout: false
+---
+
+<script setup>
+  import pButton from '../button/Button.vue'
+  import pModal from '../modal/Modal.vue'
+  import pNavbar from '../navbar/Navbar.vue'
+  import pNavbarBrand from '../navbar/NavbarBrand.vue'
+  import pNavbarNav from '../navbar/NavbarNav.vue'
+  import pSidebar from '../sidebar/Sidebar.vue'
+  import pSidebarBrand from '../sidebar/SidebarBrand.vue'
+  import pSidebarNav from '../sidebar/SidebarNav.vue'
+  import pNavItem from '../nav/NavItem.vue'
+  import pPage from '../page/Page.vue'
+  import pHeading from '../heading/Heading.vue'
+  import pContextualBar from './ContextualBar.vue'
+  import pDropzone from '../dropzone/Dropzone.vue'
+  import pCheckbox from '../checkbox/Checkbox.vue'
+  import pSheet from '../sheet/Sheet.vue'
+  import pFormGroup from '../form-group/FormGroup.vue'
+  import pInput from '../input/Input.vue'
+  import IconClose from '@privyid/persona-icon/vue/close/16.vue'
+  import IconEdit from '@privyid/persona-icon/vue/edit/16.vue'
+  import { usePreview } from '../cropper/utils/use-preview'
+  import { reactive, ref } from 'vue-demi'
+  import { withBase } from 'vitepress'
+
+  const sample = ref(false)
+  const sample2 = ref(false)
+  const modal = ref(false)
+</script>
+
+<p-navbar fixed>
+  <p-navbar-nav align="right">
+    <p-nav-item active>Label</p-nav-item>
+    <p-nav-item>Label</p-nav-item>
+    <p-nav-item>Label</p-nav-item>
+  </p-navbar-nav>
+</p-navbar>
+
+<div class="flex w-full h-full">
+  <p-sidebar toggleable="lg" fixed>
+    <template #brand>
+      <p-sidebar-brand>
+        <img src="../../public/assets/images/icon-privy.svg" />
+      </p-sidebar-brand>
+    </template>
+    <p-sidebar-nav>
+      <p-nav-item active>Documents</p-nav-item>
+      <p-nav-item>Contacts</p-nav-item>
+      <p-nav-item>Structure</p-nav-item>
+    </p-sidebar-nav>
+  </p-sidebar>
+  <p-page expand="lg">
+    <p-contextual-bar v-model="sample2" title="Hey! This is Title Text" fixed>
+      <template #action>
+        <p-button size="sm" color="info">Button text</p-button>
+      </template>
+    </p-contextual-bar>
+    <p-contextual-bar v-model="sample" title="Hey! This is Title Text">
+      <template #action>
+        <p-button size="sm" color="info">Button text</p-button>
+      </template>
+    </p-contextual-bar>
+    <div class="w-6/12 mx-auto">
+      <p-heading element="h5" class="mb-5">
+        A wonderful serenity has taken possession
+      </p-heading>
+      <p class="pb-6">
+        My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath.
+      </p>
+      <div class="flex flex-row pb-6 space-x-4">
+        <p-button color="info" @click="sample = !sample">Contextual default</p-button>
+        <p-button color="info" @click="sample2 = !sample2">Contextual fixed</p-button>
+        <p-button color="info" @click="modal=true">Open modal</p-button>
+      </div>
+      <p class="pb-6">
+        My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath
+      </p>
+      <p>
+        My entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath
+      </p>
+    </div>
+  </p-page>
+</div>
+
+<p-modal
+  v-model="modal"
+  title="Modal Title"
+  text="This is place holder text. The basic dialog for modals
+    should contain only valuable and relevant information."
+  size="full"
+  header-class="px-6"
+  body-class="p-6">
+</p-modal>

package/dist/components/cropper/Cropper.spec.d.ts

@@ -0,0 +1 @@
+export {};