@privyid/persona 1.1.2 → 1.2.0

package/dist/components/toggle/index.md

@@ -0,0 +1,280 @@
+---
+title: Toggle · Components
+description: Base input toggle.
+---
+
+<script setup>
+  import pToggle from "./Toggle.vue"
+  import IconLight from '@privyid/persona-icon/vue/sun/16.vue'
+  import IconDark from '@privyid/persona-icon/vue/moon/16.vue'
+  import { ref } from "vue-demi"
+  import { useDark } from '@vueuse/core'
+
+  const modelA   = ref(false)
+  const modelB   = ref('off')
+  const isDark   = useDark({ storageKey: 'vitepress-theme-appearance' })
+  const selected = ref([])
+</script>
+
+# Toggle
+
+> Base input toggle.
+
+## Usage
+
+### Simple Usage
+<preview>
+  <p-toggle>Text</p-toggle>
+</preview>
+
+```vue
+<template>
+  <p-toggle>Text</p-toggle>
+</template>
+```
+
+### With Icon
+
+<preview>
+  <p-toggle>
+    <template #checked>
+      <svg width="8" height="8" viewBox="0 0 2 8" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="2" height="8" rx="1" fill="white" /></svg>
+    </template>
+    <template #unchecked>
+      <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="3" stroke="white" stroke-width="2"/></svg>
+    </template>
+    <template #default>
+      Text
+    </template>
+  </p-toggle>
+</preview>
+
+```vue
+<template>
+  <p-toggle>
+    <template #checked>
+      <svg width="8" height="8" viewBox="0 0 2 8" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="2" height="8" rx="1" fill="white" /></svg>
+    </template>
+    <template #unchecked>
+      <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="3" stroke="white" stroke-width="2"/></svg>
+    </template>
+    <template #default>
+      Text
+    </template>
+  </p-toggle>
+</template>
+```
+
+## Type variant
+
+There available 2 type variants: `pill` and `flat`. default is `pill`
+
+<preview class="flex-col items-center space-y-3">
+  <p-toggle variant="pill">Pill</p-toggle>
+  <p-toggle variant="flat">Flat</p-toggle>
+</preview>
+
+```vue
+<template>
+  <p-toggle variant="pill">Pill</p-toggle>
+  <p-toggle variant="flat">Flat</p-toggle>
+</template>
+```
+
+## Custom label
+
+You can customize toggle label with `checked-label` and `unchecked-label`
+
+<preview class="flex-col items-center space-y-3">
+  <p-toggle variant="pill" checked-label="Y" unchecked-label="N">Text</p-toggle>
+  <p-toggle variant="flat" checked-label="PM" unchecked-label="AM">Text</p-toggle>
+</preview>
+
+```vue
+<template>
+  <p-toggle variant="pill" checked-label="Y" unchecked-label="N">Text</p-toggle>
+  <p-toggle variant="flat" checked-label="PM" unchecked-label="AM">Text</p-toggle>
+</template>
+```
+
+You can also use `checked` and `unchecked` slot to customize the label, it allow you to use non-text label like an **icon**
+
+<preview class="flex-col items-center space-y-3">
+  <p-toggle v-model="isDark">
+    <template #checked>
+      <IconDark />
+    </template>
+    <template #unchecked>
+      <IconLight />
+    </template>
+    <template #default>
+      Dark Mode
+    </template>
+  </p-toggle>
+</preview>
+
+```vue
+<template>
+  <p-toggle>
+    <template #checked>
+      <IconDark />
+    </template>
+    <template #unchecked>
+      <IconLight />
+    </template>
+    <template #default>
+      Dark Mode
+    </template>
+  </p-toggle>
+</template>
+
+<script setup>
+  import IconLight from '@privyid/persona-icon/vue/sun/16.vue'
+  import IconDark from '@privyid/persona-icon/vue/moon/16.vue'
+</script>
+```
+
+## Hide label
+
+You can hide toggle label with `no-label` prop
+
+<preview class="flex-col items-center space-y-3">
+  <p-toggle variant="pill" no-label>Text</p-toggle>
+  <p-toggle variant="flat" no-label>Text</p-toggle>
+</preview>
+
+```vue
+<template>
+  <p-toggle variant="pill" no-label>Text</p-toggle>
+  <p-toggle variant="flat" no-label>Text</p-toggle>
+</template>
+```
+
+## Disabled state
+
+<preview class="flex-col items-center space-y-3">
+  <p-toggle variant="pill" disabled>Pill</p-toggle>
+  <p-toggle variant="flat" disabled>Flat</p-toggle>
+</preview>
+
+```vue
+<template>
+  <p-toggle variant="pill" disabled>Pill</p-toggle>
+  <p-toggle variant="flat" disabled>Flat</p-toggle>
+</template>
+```
+
+## Readonly state
+
+<preview class="flex-col items-center space-y-3">
+  <p-toggle readonly>Readonly False</p-toggle>
+  <p-toggle readonly checked>Readonly True</p-toggle>
+</preview>
+
+```vue
+<template>
+  <p-toggle readonly>Readonly False</p-toggle>
+  <p-toggle readonly checked>Readonly True</p-toggle>
+</template>
+```
+
+## Binding v-model
+
+<preview class="flex-col items-center space-y-3">
+  <p-toggle v-model="modelA">Text</p-toggle>
+</preview>
+
+**Result :**
+
+<pre><code>{{ modelA }}</code></pre>
+
+```vue
+<template>
+  <p-toggle v-model="modelA">Text</p-toggle>
+</template>
+```
+
+### Custom v-model value
+
+By default, value of toggle is always `Boolean`, but you can change it with `value` and `unchecked-value`.
+
+<preview class="flex-col items-center space-y-3">
+  <p-toggle v-model="modelB" value="on" unchecked-value="off">Lamp</p-toggle>
+</preview>
+
+**Result :**
+
+<pre><code>{{ modelB }}</code></pre>
+
+```vue
+<template>
+  <p-toggle
+    v-model="model"
+    value="on"
+    unchecked-value="off">
+    Active
+  </p-toggle>
+</template>
+```
+
+### Array v-model
+
+Similar to [Checkbox](/components/checkbox/index), if v-model **state** is an *array* it will append the value instead of replacing it.
+
+<preview class="flex-col items-center">
+  <div class="flex flex-col space-y-3">
+    <p-toggle v-model="selected" value="apple">Apple</p-toggle>
+    <p-toggle v-model="selected" value="grape">Grape</p-toggle>
+    <p-toggle v-model="selected" value="pineapple">Pineapple</p-toggle>
+  </div>
+</preview>
+
+**Selected :**
+
+<pre class="whitespace-normal"><code>{{ selected }}</code></pre>
+
+```vue
+<template>
+  <div class="flex flex-col space-y-3">
+    <p-toggle v-model="selected" value="apple">Apple</p-toggle>
+    <p-toggle v-model="selected" value="grape">Grape</p-toggle>
+    <p-toggle v-model="selected" value="pineapple">Pineapple</p-toggle>
+  </div>
+</template>
+```
+
+## API
+
+### Props
+
+| Props            |   Type    | Default | Description                                                              |
+|------------------|:---------:|:-------:|--------------------------------------------------------------------------|
+| `variant`        | `String`  | `pill`  | Toggle style variant, valid value is `pill`, `flat`                      |
+| `checked`        | `Boolean` | `false` | Checked condition. if it is `true`, Toggle will be checked on first time |
+| `value`          |   `Any`   | `true`  | Checked value                                                            |
+| `uncheckedValue` |   `Any`   | `false` | Unchecked value                                                          |
+| `checkedLabel`   | `String`  |  `on`   | Label when Toggle is checked                                             |
+| `uncheckedLabel` | `String`  |  `off`  | Label when Toggle is unchecked                                           |
+| `noLabel`        | `Boolean` | `false` | Hide label                                                               |
+| `disabled`       | `Boolean` | `false` | Disabled state                                                           |
+| `readonly`       | `Boolean` | `false` | Readonly state                                                           |
+| `modelValue`     |   `Any`   |   `-`   | `v-model` value                                                          |
+| `switchClass`    | `String` or `Array` or `Object`  |      `-`       | CSS class to add in the toggle switch      |
+
+### Slots
+
+| Name        | Description                 |
+|-------------|-----------------------------|
+| `default`   | Content to place in toggle  |
+| `checked`   | Content for checked label   |
+| `unchecked` | Content for unchecked label |
+
+### Events
+
+| Name     | Arguments | Description              |
+|----------|-----------|--------------------------|
+| `change` | Boolean   | Event when value changed |
+
+## See Also
+- [Checkbox](/components/checkbox/index)
+- [Radio](/components/radio/index)

package/dist/components/tooltip/Tooltip.vue

@@ -13,17 +13,14 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { PropType } from 'vue-demi'
+<script setup>
 import {
   toRef,
   watch,
   computed,
   watchEffect,
-  ref,
-} from 'vue-demi'
-import type { ColorVariant } from '.'
-import type { Placement } from '@floating-ui/dom'
+  ref
+} from "vue-demi";
 import {
   autoUpdate,
   computePosition,
@@ -32,89 +29,74 @@ import {
   flip,
   shift,
   inline,
-  hide,
-} from '@floating-ui/dom'
-
+  hide
+} from "@floating-ui/dom";
 const props = defineProps({
   show: {
-    type   : Boolean,
-    default: false,
+    type: Boolean,
+    default: false
   },
   color: {
-    type   : String as PropType<ColorVariant>,
-    default: 'black',
+    type: String,
+    default: "black"
   },
   target: {
-    type   : Object as PropType<HTMLElement>,
-    default: undefined,
+    type: Object,
+    default: void 0
   },
   placement: {
-    type   : String as PropType<Placement>,
-    default: 'top',
-  },
-})
-
-const emit = defineEmits<{
-  'show': [HTMLElement],
-  'hide': [HTMLElement],
-}>()
-
-const placement    = toRef(props, 'placement')
-const target       = toRef(props, 'target')
-const tooltip      = ref<HTMLDivElement>()
-const tooltipArrow = ref<HTMLDivElement>()
-const isHidden     = ref(false)
-
+    type: String,
+    default: "top"
+  }
+});
+const emit = defineEmits(["show", "hide"]);
+const placement = toRef(props, "placement");
+const target = toRef(props, "target");
+const tooltip = ref();
+const tooltipArrow = ref();
+const isHidden = ref(false);
 const classNames = computed(() => {
-  const result: string[] = []
-
+  const result = [];
   if (props.color)
-    result.push(`tooltip--${props.color}`)
-
-  return result
-})
-
+    result.push(`tooltip--${props.color}`);
+  return result;
+});
 watch(() => props.show, (value) => {
   if (value)
-    emit('show', target.value)
+    emit("show", target.value);
   else
-    emit('hide', target.value)
-})
-
+    emit("hide", target.value);
+});
 watchEffect((onCleanup) => {
   if (tooltip.value && target.value && tooltipArrow.value) {
     const cleanup = autoUpdate(target.value, tooltip.value, () => {
       computePosition(target.value, tooltip.value, {
-        strategy  : 'absolute',
-        placement : placement.value,
+        strategy: "absolute",
+        placement: placement.value,
         middleware: [
           flip(),
           shift(),
           inline(),
           offset(12),
           hide(),
-          arrow({ element: tooltipArrow.value }),
-        ],
-      }).then(({ x, y, middlewareData, placement }) => {
+          arrow({ element: tooltipArrow.value })
+        ]
+      }).then(({ x, y, middlewareData, placement: placement2 }) => {
         if (tooltip.value) {
-          tooltip.value.dataset.popperPlacement = placement
-
-          tooltip.value.style.left = `${x || 0}px`
-          tooltip.value.style.top  = `${y || 0}px`
-
-          isHidden.value = middlewareData.hide.referenceHidden
+          tooltip.value.dataset.popperPlacement = placement2;
+          tooltip.value.style.left = `${x || 0}px`;
+          tooltip.value.style.top = `${y || 0}px`;
+          isHidden.value = middlewareData.hide.referenceHidden;
         }
-
         if (tooltipArrow.value) {
-          tooltipArrow.value.style.left = `${middlewareData.arrow.x}px`
-          tooltipArrow.value.style.top  = `${middlewareData.arrow.y}px`
+          tooltipArrow.value.style.left = `${middlewareData.arrow.x}px`;
+          tooltipArrow.value.style.top = `${middlewareData.arrow.y}px`;
         }
-      })
-    }, { animationFrame: true })
-
-    onCleanup(cleanup)
+      });
+    }, { animationFrame: true });
+    onCleanup(cleanup);
   }
-}, { flush: 'post' })
+}, { flush: "post" });
 </script>
 
 <style lang="postcss">

package/dist/components/tooltip/Tooltip.vue.d.ts

@@ -0,0 +1,68 @@
+import type { PropType } from 'vue-demi';
+import type { ColorVariant } from '.';
+import type { Placement } from '@floating-ui/dom';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        tooltip: HTMLDivElement;
+        tooltipArrow: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue-demi").DefineComponent<import("vue-demi").ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    target: {
+        type: PropType<HTMLElement>;
+        default: undefined;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
+    show: (args_0: HTMLElement) => void;
+    hide: (args_0: HTMLElement) => void;
+}, string, import("vue-demi").PublicProps, Readonly<import("vue-demi").ExtractPropTypes<{
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: PropType<ColorVariant>;
+        default: string;
+    };
+    target: {
+        type: PropType<HTMLElement>;
+        default: undefined;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+}>> & Readonly<{
+    onShow?: ((args_0: HTMLElement) => any) | undefined;
+    onHide?: ((args_0: HTMLElement) => any) | undefined;
+}>, {
+    target: HTMLElement;
+    color: ColorVariant;
+    placement: Placement;
+    show: boolean;
+}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tooltip/TooltipContainer.vue

@@ -13,77 +13,62 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   reactive,
-  ref,
-} from 'vue-demi'
-import Tooltip from './Tooltip.vue'
-import type { TooltipItem, TooltipOptions } from '.'
-import { uniqueId } from 'lodash-es'
-import { vPMd } from '../markdown'
-
-const items = ref<Map<string, TooltipItem>>(new Map())
-
-function add (options: TooltipOptions): string {
-  const id = uniqueId('tooltip_')
-
-  items.value.set(id, reactive({ ...options, show: false }) as TooltipItem)
-
-  return id
+  ref
+} from "vue-demi";
+import Tooltip from "./Tooltip.vue";
+import { uniqueId } from "lodash-es";
+import { vPMd } from "../markdown";
+const items = ref(/* @__PURE__ */ new Map());
+function add(options) {
+  const id = uniqueId("tooltip_");
+  items.value.set(id, reactive({ ...options, show: false }));
+  return id;
 }
-
-function update (id: string, options: TooltipOptions) {
-  const item = items.value.get(id)
-
+function update(id, options) {
+  const item = items.value.get(id);
   if (item) {
-    item.target    = options.target
-    item.text      = options.text
-    item.placement = options.placement
+    item.target = options.target;
+    item.text = options.text;
+    item.placement = options.placement;
   }
 }
-
-function show (id: string) {
-  const item   = items.value.get(id)
-  const result = item.target.dispatchEvent(new CustomEvent('tooltip:show', {
-    detail    : item,
-    cancelable: true,
-  }))
-
+function show(id) {
+  const item = items.value.get(id);
+  const result = item.target.dispatchEvent(new CustomEvent("tooltip:show", {
+    detail: item,
+    cancelable: true
+  }));
   if (result)
-    item.show = true
+    item.show = true;
 }
-
-function hide (id: string) {
-  const item   = items.value.get(id)
-  const result = item.target.dispatchEvent(new CustomEvent('tooltip:hide', {
-    detail    : item,
-    cancelable: true,
-  }))
-
+function hide(id) {
+  const item = items.value.get(id);
+  const result = item.target.dispatchEvent(new CustomEvent("tooltip:hide", {
+    detail: item,
+    cancelable: true
+  }));
   if (result)
-    item.show = false
+    item.show = false;
 }
-
-function toggle (id: string) {
-  const item = items.value.get(id)
-
+function toggle(id) {
+  const item = items.value.get(id);
   if (item.show)
-    hide(id)
+    hide(id);
   else
-    show(id)
+    show(id);
 }
-
-function remove (id: string) {
-  items.value.delete(id)
+function remove(id) {
+  items.value.delete(id);
 }
-
 defineExpose({
   add,
   update,
   show,
   hide,
   toggle,
-  remove,
-})
+  remove
+});
 </script>

package/dist/components/tooltip/TooltipContainer.vue.d.ts

@@ -0,0 +1,16 @@
+import type { TooltipOptions } from '.';
+declare function add(options: TooltipOptions): string;
+declare function update(id: string, options: TooltipOptions): void;
+declare function show(id: string): void;
+declare function hide(id: string): void;
+declare function toggle(id: string): void;
+declare function remove(id: string): void;
+declare const _default: import("vue-demi").DefineComponent<{}, {
+    add: typeof add;
+    update: typeof update;
+    show: typeof show;
+    hide: typeof hide;
+    toggle: typeof toggle;
+    remove: typeof remove;
+}, {}, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue-demi").ComponentProvideOptions, true, {}, any>;
+export default _default;