@privyid/persona 1.2.1 → 1.2.2-dev.2

package/dist/components/radio/Radio.vue

@@ -0,0 +1,285 @@
+<template>
+  <label
+    data-testid="radio"
+    class="radio"
+    :class="classNames"
+    @click.prevent="toggle">
+    <span class="radio__icon">
+      <IconCheck v-if="appearance === 'option'" />
+      <svg
+        v-else-if="appearance === 'checkbox'"
+        width="10"
+        height="10"
+        viewBox="0 0 14 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M3.81581 8.48528L5.23002 9.8995L6.64423 8.48528L13.7153 1.41421L12.3011 0L5.23002 7.07107L1.69449 3.53553L0.280273 4.94975L3.81581 8.48528Z" />
+      </svg>
+
+      <svg
+        v-else
+        width="10"
+        height="10"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <circle
+          cx="7"
+          cy="7"
+          r="6" />
+      </svg>
+    </span>
+    <span class="radio__label">
+      <slot :is-checked="model" />
+    </span>
+    <input
+      type="radio"
+      :value="model"
+      :name="name"
+      :disabled="disabled || readonly">
+  </label>
+</template>
+
+<script setup>
+import { useVModel } from ".";
+import IconCheck from "@privyid/persona-icon/vue/checkmark/20.vue";
+import { computed } from "vue";
+const props = defineProps({
+  name: {
+    type: String,
+    default: ""
+  },
+  modelValue: {
+    type: void 0,
+    default: false
+  },
+  value: {
+    type: void 0,
+    default: true
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  appearance: {
+    type: String,
+    default: "radio"
+  }
+});
+defineEmits(["update:modelValue", "change"]);
+const model = useVModel(props);
+const classNames = computed(() => {
+  const result = [];
+  if (model.value)
+    result.push("radio--checked");
+  if (props.readonly)
+    result.push("radio--readonly");
+  if (props.disabled)
+    result.push("radio--disabled");
+  if (props.appearance)
+    result.push(`radio--${props.appearance}`);
+  return result;
+});
+function toggle() {
+  if (!props.disabled && !props.readonly)
+    model.value = true;
+}
+defineSlots();
+</script>
+
+<style lang="postcss">
+.radio {
+  @apply inline-flex space-x-2 relative cursor-pointer select-none items-baseline;
+
+  /**
+  * hide default appearance
+  * radio
+  */
+  & > input[type="radio"] {
+    @apply appearance-none w-0 h-0 opacity-0 absolute;
+  }
+
+  /**
+  * replace default appearance
+  * with custom icon
+  */
+  &__icon {
+    @apply w-4 h-4 border shrink-0 rounded-full border-subtle inline-flex items-center justify-center bg-default;
+    @apply dark:border-dark-subtle dark:bg-dark-default;
+
+    > svg {
+      @apply w-3 fill-default;
+      @apply dark:fill-dark-default;
+    }
+  }
+
+  /**
+  * give color of
+  * checkbox label
+  */
+  &__label {
+    @apply text-default grow;
+    @apply dark:text-dark-default;
+  }
+
+  /**
+  * disable radio
+  */
+  &&--disabled {
+    @apply opacity-50;
+
+    &:not(.radio--checked) {
+      .radio__icon {
+        @apply bg-base border-subtle;
+        @apply dark:bg-dark-base dark:border-dark-subtle;
+
+        > svg {
+          @apply fill-base;
+          @apply dark:fill-dark-base;
+        }
+      }
+    }
+  }
+
+  /**
+  * checked radio
+  */
+  &&--checked {
+    &:not(.radio--checkbox, .radio--option) {
+      .radio__icon {
+        @apply bg-default;
+        @apply dark:bg-dark-inverse;
+      }
+    }
+
+    .radio__icon {
+      @apply border-brand-accent;
+      @apply dark:border-dark-brand-accent;
+
+      > svg {
+        @apply fill-brand-accent;
+        @apply dark:fill-dark-brand-accent;
+      }
+    }
+
+    &.radio--checkbox {
+      .radio__icon {
+        @apply bg-brand-accent;
+        @apply dark:bg-dark-brand-accent;
+
+        > svg {
+          @apply fill-default;
+          @apply dark:fill-dark-inverse;
+        }
+      }
+    }
+  }
+
+  /**
+  * radio with checkbox
+  * appearance
+  */
+  &&--checkbox {
+    .radio__icon {
+      @apply rounded-tn;
+    }
+  }
+
+  /**
+  * radio with option
+  * appearance
+  */
+  &&--option {
+    .radio__icon {
+      @apply order-2 border-none invisible bg-transparent;
+
+      > svg {
+        @apply w-4;
+      }
+    }
+
+    .radio__label {
+      @apply grow;
+    }
+
+    .dropdown__menu > .dropdown__subitem > & {
+      .radio__label {
+        @apply ml-0;
+      }
+    }
+
+    &.radio--checked {
+      .radio__icon {
+        @apply text-info visible;
+        @apply dark:text-dark-info;
+
+        > svg {
+          @apply fill-brand-accent;
+          @apply dark:fill-dark-brand-accent;
+        }
+      }
+    }
+  }
+
+  /**
+  * radio with
+  * appearance none
+  */
+  &&--none {
+    .radio__icon {
+      @apply hidden;
+
+      + .radio__label {
+        @apply ml-0;
+      }
+    }
+
+    &.radio--disabled {
+      .card {
+        @apply bg-base hover:shadow-none hover:cursor-default;
+        @apply dark:bg-dark-base;
+      }
+    }
+  }
+
+  /**
+  * checkbox in
+  * dropdown menu
+  */
+  .dropdown__menu > .dropdown__subitem > .dropdown__item > &,
+  .dropdown__menu > .dropdown__subitem > & {
+    @apply w-full select-none;
+  }
+
+  .dropdown__menu > .dropdown__subitem > .dropdown__item > & {
+    @apply py-[2px];
+  }
+
+  .dropdown__menu > .dropdown__subitem > & {
+    @apply px-4 py-[10px];
+
+    &:not(.radio--option) {
+      .radio__label {
+        @apply ml-4;
+      }
+    }
+
+    &:hover,
+    &:focus-visible {
+      @apply bg-default-alpha;
+      @apply dark:bg-dark-default-alpha;
+    }
+  }
+}
+</style>

package/dist/components/radio/Radio.vue.d.ts

@@ -0,0 +1,97 @@
+import type { PropType, VNode } from 'vue';
+type AppearanceType = 'radio' | 'checkbox' | 'option' | 'none';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default(props: {
+            isChecked: boolean;
+        }): VNode[];
+    }> & {
+        default(props: {
+            isChecked: boolean;
+        }): VNode[];
+    };
+    refs: {};
+    rootEl: HTMLLabelElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    value: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    appearance: {
+        type: PropType<AppearanceType>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (args_0: boolean) => void;
+    change: (args_0: boolean) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    value: {
+        type: PropType<any>;
+        default: boolean;
+    };
+    checked: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    appearance: {
+        type: PropType<AppearanceType>;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    onChange?: ((args_0: boolean) => any) | undefined;
+}>, {
+    value: any;
+    name: string;
+    modelValue: any;
+    disabled: boolean;
+    readonly: boolean;
+    checked: boolean;
+    appearance: AppearanceType;
+}, {}, {}, {}, string, import("vue").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/radio/index.d.ts

@@ -0,0 +1,7 @@
+import type { CheckboxProps } from '../checkbox';
+export type RadioProps = Omit<CheckboxProps, 'uncheckedValue'>;
+export interface ChangedInteface {
+    value: any;
+    state: boolean;
+}
+export declare function useVModel(props: RadioProps): import("vue").WritableComputedRef<boolean, boolean>;

package/dist/components/radio/index.mjs

@@ -0,0 +1,16 @@
+import { computed, getCurrentInstance } from "vue";
+import { isEqual } from "../utils/value.mjs";
+export function useVModel(props) {
+  const { emit } = getCurrentInstance();
+  const model = computed({
+    get() {
+      return isEqual(props.modelValue, props.value) || props.checked;
+    },
+    set(value) {
+      emit("change", value);
+      if (value)
+        emit("update:modelValue", props.value);
+    }
+  });
+  return model;
+}

package/dist/components/richtext/Richtext.vue

@@ -0,0 +1,271 @@
+<template>
+  <div
+    class="richtext"
+    :class="classNames">
+    <template v-if="editor">
+      <div
+        class="richtext__controls">
+        <ToolbarAdvance v-if="variant === 'advanced'" />
+        <ToolbarSimple v-else />
+      </div>
+      <FloatingMenu
+        :editor="editor"
+        :should-show="({ editor }) => editor.isActive('image')"
+        :tippy-options="{ placement: 'top' }">
+        <div class="richtext__floating-menu">
+          <ImageEdit />
+        </div>
+      </FloatingMenu>
+      <FloatingMenu
+        :editor="editor"
+        :should-show="({ editor }) => editor.isActive('link')"
+        :tippy-options="{ placement: 'top' }">
+        <div class="richtext__floating-menu">
+          <LinkDetail />
+        </div>
+      </FloatingMenu>
+    </template>
+    <editor-content
+      v-model="model"
+      class="richtext__input"
+      rows="3"
+      :editor="editor" />
+  </div>
+</template>
+
+<script setup>
+import {
+  computed,
+  provide,
+  watch
+} from "vue";
+import {
+  useEditor,
+  EditorContent,
+  FloatingMenu
+} from "@tiptap/vue-3";
+import StarterKit from "@tiptap/starter-kit";
+import Highlight from "@tiptap/extension-highlight";
+import Underline from "@tiptap/extension-underline";
+import TextAlign from "@tiptap/extension-text-align";
+import TextStyle from "@tiptap/extension-text-style";
+import Placeholder from "@tiptap/extension-placeholder";
+import FontFamily from "@tiptap/extension-font-family";
+import Image from "@tiptap/extension-image";
+import ImageAlign from "./tiptap/image-align";
+import FontSize from "tiptap-extension-font-size";
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
+import Link from "@tiptap/extension-link";
+import ToolbarSimple from "./RichtextToolbarSimple.vue";
+import ToolbarAdvance from "./RichtextToolbarAdvance.vue";
+import ImageEdit from "./popup/RichtextPopupImageEdit.vue";
+import LinkDetail from "./popup/RichtextPopupLinkDetail.vue";
+import { useVModel } from "../input";
+import { defuFn } from "defu";
+import { RICHTEXT_CONTEXT } from ".";
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: void 0
+  },
+  variant: {
+    type: String,
+    default: "simple"
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  options: {
+    type: Object,
+    default: () => ({})
+  }
+});
+const model = useVModel(props);
+const editor = useEditor(defuFn(
+  props.options,
+  {
+    editable: !props.disabled && !props.readonly,
+    content: props.modelValue,
+    onUpdate: () => {
+      model.value = editor.value?.isEmpty ? void 0 : editor.value?.getHTML();
+    },
+    extensions: [
+      StarterKit,
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      Highlight.configure({ multicolor: true }),
+      TextStyle,
+      Underline,
+      FontFamily,
+      FontSize,
+      Image.configure({ allowBase64: true }),
+      ImageAlign,
+      Placeholder.configure({ placeholder: props.placeholder }),
+      Link.configure({
+        defaultProtocol: "https",
+        openOnClick: false
+      }),
+      Table.configure({ resizable: true }),
+      TableRow,
+      TableHeader,
+      TableCell
+    ]
+  }
+));
+watch(() => [props.disabled, props.readonly], ([disabled, readonly]) => {
+  if (editor.value)
+    editor.value.setEditable(!disabled && !readonly);
+});
+const classNames = computed(() => {
+  const results = [];
+  if (props.disabled)
+    results.push("richtext--disabled");
+  if (props.readonly)
+    results.push("richtext--readonly");
+  if (props.error)
+    results.push("richtext--error", "state--error");
+  return results;
+});
+watch(() => props.modelValue, (value) => {
+  if (value !== editor.value.getHTML())
+    editor.value.commands.setContent(value ?? "");
+});
+defineEmits(["update:modelValue"]);
+provide(RICHTEXT_CONTEXT, { editor });
+defineExpose({ editor });
+</script>
+
+<style lang="postcss">
+.richtext {
+  --p-richtext-min-height: 120px;
+
+  @apply flex flex-col w-full;
+
+  &__controls {
+    @apply rounded-t bg-default border border-b-0 border-default py-1 flex flex-wrap;
+    @apply dark:bg-dark-default dark:border-dark-default;
+  }
+
+  &__controls-group {
+    @apply px-1 flex flex-shrink-0 select-none items-start space-x-1;
+    @apply dark:border-dark-default;
+
+    &:not(:last-child) {
+      @apply border-r;
+    }
+  }
+
+  &__input {
+    @apply w-full;
+  }
+
+  &__floating-menu {
+    @apply z-tooltip px-1 py-1 rounded text-xs flex space-x-1 drop-shadow-sm;
+    @apply bg-default text-subtle;
+    @apply dark:bg-dark-default dark:text-dark-subtle;
+  }
+
+  .tiptap {
+    @apply p-3 rounded rounded-t-none border border-solid border-subtlest hover:border-subtle focus:border-subtle placeholder:text-muted w-full outline-none text-default bg-default resize-none min-h-[var(--p-richtext-min-height)] focus:ring-4 focus:ring-subtle/10 focus:z-1;
+    @apply dark:border-dark-subtlest hover:dark:border-dark-subtle focus:dark:border-dark-subtle placeholder:dark:text-dark-muted dark:text-dark-default dark:bg-dark-default focus:dark:ring-dark-subtle/10;
+
+    p.is-editor-empty:first-child::before {
+      @apply content-[attr(data-placeholder)] h-0 float-left;
+      @apply text-muted pointer-events-none;
+      @apply dark:text-dark-muted;
+    }
+
+    img.ProseMirror-selectednode,
+    figure.ProseMirror-selectednode > img {
+      @apply ring ring-subtle;
+      @apply dark:ring-dark-subtle;
+    }
+
+    table {
+      @apply table table-fixed border-collapse w-full;
+
+      .column-resize-handle {
+        @apply bg-brand-accent/20 w-1 absolute top-0 -bottom-0.5 -right-0.5 z-1;
+      }
+
+      td,
+      th {
+        @apply relative bg-default;
+        @apply dark:bg-dark-default;
+
+        &.selectedCell {
+          @apply bg-brand-accent/20;
+          @apply dark:bg-brand-accent/20;
+        }
+      }
+
+    }
+
+    .tableWrapper {
+      @apply overflow-x-auto;
+    }
+
+    &.resize-cursor {
+      @apply cursor-col-resize;
+    }
+
+    ul,
+    ol {
+      @apply pl-6 my-4;
+    }
+
+    ul {
+      @apply list-disc;
+    }
+
+    ol {
+      @apply list-decimal;
+    }
+  }
+
+  &--disabled {
+    .tiptap {
+      @apply bg-base border-subtle pointer-events-none text-muted;
+      @apply dark:bg-dark-base dark:border-dark-subtle dark:text-dark-muted;
+    }
+  }
+
+  .state--error,
+  &--error {
+    .tiptap {
+      @apply border-danger-emphasis hover:border-danger-emphasis focus:ring-danger focus:border-danger-emphasis;
+      @apply dark:border-dark-danger-emphasis hover:dark:border-dark-danger-emphasis focus:dark:ring-dark-danger focus:dark:border-dark-danger-emphasis;
+    }
+  }
+
+  &__counter {
+    @apply text-right text-muted text-xs absolute bottom-1 right-1 pointer-events-none z-1;
+    @apply dark:text-dark-muted;
+  }
+
+  .btn.btn--variant-ghost[active="true"] {
+    @apply bg-emphasis-alpha border-subtle-alpha text-brand-accent;
+    @apply dark:bg-dark-emphasis-alpha dark:border-r-dark-subtle-alpha dark:text-dark-brand-accent;
+  }
+
+  .dropdown__item.dropdown__item--active {
+    @apply bg-emphasis-alpha border-subtle-alpha;
+    @apply dark:bg-dark-emphasis-alpha dark:border-r-dark-subtle-alpha;
+  }
+}
+</style>