0.1.102 • Published 1 year ago

@bluepic/embed v0.1.102

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

Bluepic Embed & Component Library

A UI library for visual template editing – usable either as a simple script embed or via modular Vue components.

🔹 Script Embedding (<script> without build)

Example

<head>
  <!-- ... -->
  <link rel="stylesheet" href="https://unpkg.com/@bluepic/embed@0.1.3/lib/style.css" />
  <!-- ... -->
</head>

<body>
  <!-- ... -->

  <!-- The embed app wrapper element -->
  <div id="bluepic-embed"></div>

  <!-- Important: vue3 and @bluepic/embed -->
  <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/@bluepic/embed@0.1.3/lib/bluepic-fields.umd.js"></script>
  <script>
    // Wait for window to load
    window.addEventListener('load', () => {
      // Initialize embed instance
      const embed = new BluepicFields.BluepicEmbed('#bluepic-embed', 'TEMPLATE_ID', {
        initData: { foo: 'bar' },
        displayMode: 'stack',
        darkmode: true,
      });

      embed.addEventListener('ready', (event) => {
        console.log('Editor ready', event.detail);
      });

      embed.addEventListener('data', (event) => {
        console.log('Data changed', event.detail.data);
      });
    });
  </script>
</body>

Constructor

new BluepicEmbed(
  selectorOrElement: string | HTMLElement,
  templateId: string,
  options?: {
    initData?: Record<string, unknown>;
    displayMode?: 'auto' | 'mobile' | 'stack';
    allowPanAndZoom?: boolean;
    darkmode?: boolean;
    studioResourcesBaseUrl?: string;
    cloudflarePagesHostname?: string;
    theme?: BluepicEmbeddedEditorThemeConfig;
    bxCoreVersion?: string;
    publishedSlug?: string;
  }
);

Public Methods

embed.setVariable(key: string, value: unknown): void;
embed.setData(data: Record<string, unknown>, forceOverwrite?: boolean): void;

Events

  • ready: Fired when the editor is fully initialized
  • data: Fired when data changes (event.detail.data)

🔸 Vue Components (modular usage)

📦 Installation

npm install bluepic

Main Imports

import { BluepicEmbeddedEditor, BxFields, createPopup, BluepicEmbed, BluepicFieldComponents } from '@bluepic/embed';

BluepicEmbeddedEditor

The main component for visual editing.

<template>
  <bluepic-embedded-editor
    v-model:data="data"
    :template-id="templateId"
    inline
    :display-mode="'auto'"
    :zoom-and-pan="false"
    v-model:ready="ready"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const templateId = 'TEMPLATE_ID';
const data = ref({});
const ready = ref(false);
</script>

🧩 createPopup(options)

Shows a modal popup overlay.

const popup = createPopup({
  title: 'Confirm',
  content: 'Do you want to continue?',
  actions: [
    {
      label: 'OK',
      icon: () => h(BxIcon, { name: 'check' }),
      props: { variant: 'primary' },
    },
  ],
  darkmode: true,
});
popup.close(); // Programmatically close the popup
@floating-ui/vue@hono/zod-openapi@vueuse/coreclient-zipcolorcompressorjscsscss-expressiondownloadjsflat-svgidmllodashmapbox-glmimemime-typesnanoidobject-hashp-limitsortablejsswipervue-advanced-croppervue3-delay-watchzoompinch
0.1.102

1 year ago

0.1.101

1 year ago

0.1.100

1 year ago

0.1.94

1 year ago

0.1.93

1 year ago

0.1.92

1 year ago

0.1.91

1 year ago

0.1.90

1 year ago

0.1.83

1 year ago

0.1.82

1 year ago

0.1.81

1 year ago

0.1.80

1 year ago

0.1.79

1 year ago

0.1.78

1 year ago

0.1.77

1 year ago

0.1.74

1 year ago

0.1.73

1 year ago

0.1.72

1 year ago

0.1.71

1 year ago

0.1.70

1 year ago

0.1.69

1 year ago

0.1.68

1 year ago

0.1.67

1 year ago

0.1.66

1 year ago

0.1.65

1 year ago

0.1.64

1 year ago

0.1.63

1 year ago

0.1.62

1 year ago

0.1.60

1 year ago

0.1.59

1 year ago

0.1.58

1 year ago

0.1.57

1 year ago

0.1.56

1 year ago

0.1.55

1 year ago

0.1.54

1 year ago

0.1.53

1 year ago

0.1.52

1 year ago

0.1.51

1 year ago

0.1.50

1 year ago

0.1.49

1 year ago

0.1.48

1 year ago

0.1.47

1 year ago

0.1.46

1 year ago

0.1.45

1 year ago

0.1.44

1 year ago

0.1.43

1 year ago

0.1.42

1 year ago

0.1.41

1 year ago

0.1.40

1 year ago

0.1.39

1 year ago

0.1.38

1 year ago

0.1.37

1 year ago

0.1.36

1 year ago

0.1.35

1 year ago

0.1.34

1 year ago

0.1.33

1 year ago

0.1.32

1 year ago

0.1.31

1 year ago

0.1.30

1 year ago

0.1.29

1 year ago

0.1.28

1 year ago

0.1.27

1 year ago

0.1.26

1 year ago

0.1.25

1 year ago

0.1.24

1 year ago

0.1.23

1 year ago

0.1.22

1 year ago

0.1.21

1 year ago

0.1.20

1 year ago

0.1.18

1 year ago

0.1.17

1 year ago

0.1.16

1 year ago

0.1.15

1 year ago

0.1.14

1 year ago

0.1.13

1 year ago

0.1.12

1 year ago

0.1.11

1 year ago

0.1.10

1 year ago

0.1.9

1 year ago

0.1.8

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago

0.0.101

2 years ago

0.0.100

2 years ago

0.0.71

2 years ago

0.0.70

2 years ago

0.0.69

2 years ago

0.0.68

2 years ago

0.0.67

2 years ago

0.0.66

2 years ago

0.0.65

2 years ago

0.0.64

2 years ago

0.0.63

2 years ago

0.0.62

2 years ago

0.0.61

2 years ago

0.0.60

2 years ago

0.0.59

2 years ago

0.0.58

2 years ago

0.0.57

2 years ago

0.0.56

2 years ago

0.0.55

2 years ago

0.0.54

2 years ago

0.0.53

2 years ago

0.0.51

2 years ago

0.0.50

2 years ago

0.0.49

2 years ago

0.0.48

2 years ago

0.0.47

2 years ago

0.0.46

2 years ago

0.0.43

2 years ago

0.0.42

2 years ago

0.0.41

2 years ago

0.0.40

2 years ago

0.0.39

2 years ago

0.0.38

2 years ago

0.0.37

2 years ago

0.0.36

2 years ago

0.0.35

2 years ago

0.0.34

2 years ago

0.0.33

2 years ago

0.0.32

2 years ago

0.0.31

2 years ago

0.0.30

2 years ago

0.0.29

2 years ago

0.0.28

2 years ago

0.0.27

2 years ago

0.0.26

2 years ago

0.0.25

2 years ago

0.0.23

2 years ago

0.0.22

2 years ago

0.0.21

2 years ago

0.0.20

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.15

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago