0.1.102 • Published 8 months ago

@bluepic/embed v0.1.102

Weekly downloads
-
License
-
Repository
-
Last release
8 months 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

8 months ago

0.1.101

8 months ago

0.1.100

8 months ago

0.1.94

8 months ago

0.1.93

8 months ago

0.1.92

8 months ago

0.1.91

8 months ago

0.1.90

8 months ago

0.1.83

8 months ago

0.1.82

8 months ago

0.1.81

8 months ago

0.1.80

8 months ago

0.1.79

8 months ago

0.1.78

8 months ago

0.1.77

8 months ago

0.1.74

8 months ago

0.1.73

9 months ago

0.1.72

9 months ago

0.1.71

9 months ago

0.1.70

9 months ago

0.1.69

9 months ago

0.1.68

9 months ago

0.1.67

9 months ago

0.1.66

9 months ago

0.1.65

9 months ago

0.1.64

9 months ago

0.1.63

9 months ago

0.1.62

9 months ago

0.1.60

9 months ago

0.1.59

9 months ago

0.1.58

9 months ago

0.1.57

9 months ago

0.1.56

9 months ago

0.1.55

9 months ago

0.1.54

9 months ago

0.1.53

9 months ago

0.1.52

9 months ago

0.1.51

9 months ago

0.1.50

9 months ago

0.1.49

9 months ago

0.1.48

9 months ago

0.1.47

9 months ago

0.1.46

9 months ago

0.1.45

9 months ago

0.1.44

9 months ago

0.1.43

9 months ago

0.1.42

9 months ago

0.1.41

9 months ago

0.1.40

9 months ago

0.1.39

9 months ago

0.1.38

9 months ago

0.1.37

9 months ago

0.1.36

9 months ago

0.1.35

9 months ago

0.1.34

9 months ago

0.1.33

9 months ago

0.1.32

9 months ago

0.1.31

9 months ago

0.1.30

9 months ago

0.1.29

9 months ago

0.1.28

9 months ago

0.1.27

9 months ago

0.1.26

10 months ago

0.1.25

10 months ago

0.1.24

10 months ago

0.1.23

10 months ago

0.1.22

10 months ago

0.1.21

10 months ago

0.1.20

10 months ago

0.1.18

10 months ago

0.1.17

10 months ago

0.1.16

10 months ago

0.1.15

10 months ago

0.1.14

10 months ago

0.1.13

10 months ago

0.1.12

10 months ago

0.1.11

10 months ago

0.1.10

10 months ago

0.1.9

10 months ago

0.1.8

10 months ago

0.1.3

10 months ago

0.1.2

10 months ago

0.1.1

10 months ago

0.1.0

10 months ago

0.0.101

1 year ago

0.0.100

1 year ago

0.0.71

1 year ago

0.0.70

1 year ago

0.0.69

1 year ago

0.0.68

1 year ago

0.0.67

1 year ago

0.0.66

1 year ago

0.0.65

1 year ago

0.0.64

1 year 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