@blokkli/editor 2.0.0-alpha.52 → 2.0.0-alpha.54

package/dist/runtime/editor/components/PluginConfigFormInline/FilterSelect/index.vue

@@ -0,0 +1,429 @@
+<template>
+  <div
+    ref="root"
+    class="bk-config-filter-select"
+    :class="{ 'bk-is-open': isOpen }"
+    @keydown.stop="onKeydown"
+  >
+    <button type="button" @click="toggle">
+      <div>
+        <span class="bk-config-filter-select-label">{{ label }}</span>
+        <span v-if="selectedLabel" class="bk-config-filter-select-value">{{
+          selectedLabel
+        }}</span>
+      </div>
+      <Icon name="bk_mdi_arrow_drop_down" />
+    </button>
+    <div
+      v-if="isOpen"
+      class="bk-config-filter-select-dropdown bk-scrollbar-dark"
+    >
+      <div v-if="options.length > 10" class="bk-config-filter-select-search">
+        <input
+          ref="searchInput"
+          v-model="search"
+          class="bk-form-input bk-is-small"
+          type="text"
+          :placeholder="$t('filterSelectSearch', 'Search...')"
+        />
+      </div>
+      <ul ref="listEl">
+        <li v-for="(option, index) in filteredOptions" :key="option.value">
+          <button
+            type="button"
+            :class="{
+  'bk-is-active': option.value === modelValue,
+  'bk-is-highlighted': index === highlightedIndex
+}"
+            @click="select(option.value)"
+            @mouseenter="highlightedIndex = index"
+          >
+            {{ option.label }}
+          </button>
+        </li>
+        <li
+          v-if="!filteredOptions.length"
+          class="bk-config-filter-select-empty"
+        >
+          {{ $t("filterSelectNoResults", "No results") }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  nextTick,
+  watch,
+  useTemplateRef,
+  onBeforeUnmount,
+  useBlokkli
+} from "#imports";
+import { Icon } from "#blokkli/editor/components";
+const { $t } = useBlokkli();
+const props = defineProps({
+  label: { type: String, required: true },
+  options: { type: Array, required: true },
+  modelValue: { type: String, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const isOpen = ref(false);
+const search = ref("");
+const highlightedIndex = ref(-1);
+const searchInput = useTemplateRef("searchInput");
+const root = useTemplateRef("root");
+const listEl = useTemplateRef("listEl");
+const selectedLabel = computed(() => {
+  const option = props.options.find((o) => o.value === props.modelValue);
+  return option?.label ?? "";
+});
+const filteredOptions = computed(() => {
+  if (!search.value) {
+    return props.options;
+  }
+  const term = search.value.toLowerCase();
+  return props.options.filter((o) => o.label.toLowerCase().includes(term));
+});
+watch(filteredOptions, () => {
+  highlightedIndex.value = -1;
+});
+function scrollToHighlighted() {
+  if (!listEl.value || highlightedIndex.value < 0) {
+    return;
+  }
+  const buttons = listEl.value.querySelectorAll("button");
+  buttons[highlightedIndex.value]?.scrollIntoView({ block: "nearest" });
+}
+function toggle() {
+  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    search.value = "";
+    highlightedIndex.value = -1;
+    nextTick(() => {
+      searchInput.value?.focus();
+    });
+  }
+}
+function select(value) {
+  emit("update:modelValue", value);
+  isOpen.value = false;
+}
+function onKeydown(e) {
+  if (!isOpen.value) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      toggle();
+    }
+    return;
+  }
+  const options = filteredOptions.value;
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault();
+      highlightedIndex.value = highlightedIndex.value < options.length - 1 ? highlightedIndex.value + 1 : 0;
+      nextTick(scrollToHighlighted);
+      break;
+    case "ArrowUp":
+      e.preventDefault();
+      highlightedIndex.value = highlightedIndex.value > 0 ? highlightedIndex.value - 1 : options.length - 1;
+      nextTick(scrollToHighlighted);
+      break;
+    case "Enter": {
+      e.preventDefault();
+      const option = options[highlightedIndex.value];
+      if (option) {
+        select(option.value);
+      }
+      break;
+    }
+    case "Escape":
+      e.preventDefault();
+      isOpen.value = false;
+      break;
+  }
+}
+function onClickOutside(e) {
+  if (root.value && !root.value.contains(e.target)) {
+    isOpen.value = false;
+  }
+}
+watch(isOpen, (open) => {
+  if (open) {
+    document.addEventListener("click", onClickOutside, true);
+  } else {
+    document.removeEventListener("click", onClickOutside, true);
+  }
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onClickOutside, true);
+});
+</script>
+
+<style>
+.bk .bk-config-filter-select {
+
+    position: relative;
+
+    height: 100%
+}
+
+    .bk .bk-config-filter-select > button {
+
+    display: flex;
+
+    height: 100%;
+
+    width: 100%;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    padding-left: 10px;
+
+    padding-right: 10px;
+
+    text-align: left;
+
+    min-width: 150px
+}
+
+    .bk .bk-config-filter-select > button > div:first-child {
+
+    display: flex;
+
+    height: 100%;
+
+    flex-direction: column;
+
+    justify-content: center;
+
+    gap: 5px
+}
+
+    .bk .bk-config-filter-select > button > .bk-icon {
+
+    height: 25px;
+
+    width: 25px;
+
+    flex-shrink: 0;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+
+    transition-property: transform;
+
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    transition-duration: 150ms
+}
+
+    .bk .bk-config-filter-select > button > .bk-icon svg {
+
+    fill: currentColor
+}
+
+    .bk .bk-config-filter-select > button .bk-config-filter-select-label {
+
+    font-size: 12px;
+
+    line-height: 16px;
+
+    font-weight: 600;
+
+    text-transform: uppercase;
+
+    line-height: 1;
+
+    letter-spacing: 0.025em;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk .bk-config-filter-select > button .bk-config-filter-select-value {
+
+    display: block;
+
+    max-width: 100%;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    font-size: 14px;
+
+    line-height: 20px;
+
+    font-weight: 600;
+
+    line-height: 1 !important;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk .bk-config-filter-select.bk-is-open > button > .bk-icon {
+
+    --bk-tw-rotate: 180deg;
+
+    transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y))
+}
+
+    .bk .bk-config-filter-select .bk-config-filter-select-dropdown {
+
+    position: absolute;
+
+    top: 100%;
+
+    left: 0px;
+
+    z-index: 50;
+
+    max-height: 300px;
+
+    width: 100%;
+
+    overflow: auto;
+
+    border-width: 1px;
+
+    --bk-tw-border-opacity: 1;
+
+    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+
+    --bk-tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+    --bk-tw-shadow-colored: 0 10px 15px -3px var(--bk-tw-shadow-color), 0 4px 6px -4px var(--bk-tw-shadow-color);
+
+    box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow)
+}
+
+    .bk .bk-config-filter-select .bk-config-filter-select-dropdown .bk-config-filter-select-search {
+
+    position: sticky;
+
+    top: 0px;
+
+    border-bottom-width: 1px;
+
+    --bk-tw-border-opacity: 1;
+
+    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+
+    padding: 15px
+}
+
+    .bk .bk-config-filter-select .bk-config-filter-select-dropdown ul {
+
+    padding-top: 3px;
+
+    padding-bottom: 3px
+}
+
+    .bk .bk-config-filter-select .bk-config-filter-select-dropdown li button {
+
+    width: 100%;
+
+    cursor: pointer;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    white-space: nowrap;
+
+    padding-left: 20px;
+
+    padding-right: 20px;
+
+    padding-top: 8px;
+
+    padding-bottom: 8px;
+
+    text-align: left;
+
+    font-size: 14px;
+
+    line-height: 20px;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk .bk-config-filter-select .bk-config-filter-select-dropdown li button:hover {
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-accent-50) / var(--bk-tw-bg-opacity, 1));
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-accent-900) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk .bk-config-filter-select .bk-config-filter-select-dropdown li button.bk-is-highlighted {
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-accent-50) / var(--bk-tw-bg-opacity, 1));
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-accent-900) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk .bk-config-filter-select .bk-config-filter-select-dropdown li button.bk-is-active {
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-accent-100) / var(--bk-tw-bg-opacity, 1));
+
+    font-weight: 600;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-accent-900) / var(--bk-tw-text-opacity, 1))
+}
+
+    .bk .bk-config-filter-select .bk-config-filter-select-dropdown .bk-config-filter-select-empty {
+
+    padding-left: 20px;
+
+    padding-right: 20px;
+
+    padding-top: 10px;
+
+    padding-bottom: 10px;
+
+    font-size: 14px;
+
+    line-height: 20px;
+
+    font-style: italic;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1))
+}
+</style>

package/dist/runtime/editor/components/PluginConfigFormInline/index.d.vue.ts

@@ -0,0 +1,22 @@
+import type { PluginConfigInput } from '#blokkli/editor/types/pluginConfig';
+type __VLS_Props = {
+    filters: PluginConfigInput[];
+    modelValue: Record<string, any>;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/PluginConfigFormInline/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="bk-plugin-config-form-inline">
+    <slot name="before" />
+    <div v-for="filter in filters" :key="filter.name">
+      <label v-if="filter.type === 'text'" class="bk-form-text">
+        <Icon name="bk_mdi_search" />
+        <input
+          :value="modelValue[filter.name]"
+          type="text"
+          :placeholder="filter.placeholder"
+          @change="
+  emit('update:modelValue', {
+    ...modelValue,
+    [filter.name]: $event.target.value
+  })
+"
+        />
+      </label>
+      <FilterSelect
+        v-else-if="filter.type === 'options'"
+        :model-value="modelValue[filter.name]"
+        :label="filter.label"
+        :options="filter.options"
+        @update:model-value="
+  emit('update:modelValue', {
+    ...modelValue,
+    [filter.name]: $event
+  })
+"
+      />
+      <FormToggle
+        v-else-if="filter.type === 'checkbox'"
+        :model-value="modelValue[filter.name]"
+        :label="filter.label"
+        @update:model-value="
+  emit('update:modelValue', {
+    ...modelValue,
+    [filter.name]: $event
+  })
+"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { FormToggle, Icon } from "#blokkli/editor/components";
+import FilterSelect from "./FilterSelect/index.vue";
+defineProps({
+  filters: { type: Array, required: true },
+  modelValue: { type: Object, required: true }
+});
+const emit = defineEmits(["update:modelValue"]);
+</script>
+
+<style>
+.bk .bk-plugin-config-form-inline {
+  position: relative;
+  z-index: 5000;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1px;
+  white-space: nowrap;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1));
+  flex: 0 0 auto
+}
+
+  .bk .bk-plugin-config-form-inline > div {
+  height: 54px;
+  flex: 1 1 0%;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1))
+}
+
+  .bk .bk-plugin-config-form-inline > div:hover {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1))
+}
+
+  .bk .bk-plugin-config-form-inline > div {
+  border-bottom-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
+}
+
+  .bk .bk-plugin-config-form-inline > div .bk-checkbox-toggle {
+  width: 100%;
+  cursor: pointer;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  padding-left: 10px;
+  padding-right: 10px
+}
+
+  .bk .bk-plugin-config-form-inline > div .bk-checkbox-toggle .bk-checkbox-toggle-label-label {
+  font-size: 14px;
+  line-height: 20px
+}
+
+  .bk .bk-plugin-config-form-inline > div .bk-form-text {
+  position: relative
+}
+
+  .bk .bk-plugin-config-form-inline > div .bk-form-text .bk-icon {
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  z-index: 50;
+  width: 20px;
+  height: 20px;
+  --bk-tw-translate-y: -50%;
+  transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1))
+}
+
+  .bk .bk-plugin-config-form-inline > div .bk-form-text .bk-icon svg {
+  fill: currentColor
+}
+
+  .bk .bk-plugin-config-form-inline > div .bk-form-text input {
+  border-width: 0 !important;
+  background-color: transparent;
+  font-size: 14px;
+  line-height: 20px;
+  --bk-tw-shadow: 0 0 #0000 !important;
+  --bk-tw-shadow-colored: 0 0 #0000 !important;
+  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow) !important;
+  outline-width: 0px !important
+}
+
+  .bk .bk-plugin-config-form-inline > div .bk-form-text input:focus {
+  outline-width: 0px !important
+}
+
+  .bk .bk-plugin-config-form-inline > div .bk-form-text:focus-within .bk-icon {
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-text-opacity, 1))
+}
+
+  .bk .bk-plugin-config-form-inline > div .bk-form-text > input {
+  display: block;
+  height: 100%;
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 5px !important;
+  min-width: 200px
+}
+</style>

package/dist/runtime/editor/components/PluginConfigFormInline/index.vue.d.ts

@@ -0,0 +1,22 @@
+import type { PluginConfigInput } from '#blokkli/editor/types/pluginConfig';
+type __VLS_Props = {
+    filters: PluginConfigInput[];
+    modelValue: Record<string, any>;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    before?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Popup/index.vue

@@ -9,8 +9,8 @@
       >
         <div class="bk-popup-title">
           <h2>{{ title }}</h2>
-          <button class="bk-popup-close" @click="onClose">
-            <Icon name="bk_mdi_close" />
+          <button class="_bk_p-20 _bk_hover:bg-mono-50 _bk_text-mono-500" @click="onClose">
+            <Icon name="bk_mdi_close" class="_bk_size-20" />
           </button>
         </div>
 
@@ -80,3 +80,78 @@ onBeforeUnmount(() => {
   }
 });
 </script>
+
+<style>
+.bk.bk-popup {
+  position: relative;
+  width: 100%;
+  hyphens: auto;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --bk-tw-shadow-colored: 0 20px 25px -5px var(--bk-tw-shadow-color), 0 8px 10px -6px var(--bk-tw-shadow-color);
+  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+  pointer-events: auto;
+  z-index: calc(var(--bk-z-index-base) + 210000) /* "tour-popup" */;
+  overflow: hidden;
+  border-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-border-opacity, 1));
+  grid-area: viewport
+}
+
+  .bk.bk-popup.bk-is-top-left {
+  align-self: flex-start;
+  justify-self: start
+}
+
+  .bk.bk-popup.bk-is-bottom-right {
+  align-self: flex-end;
+  justify-self: end
+}
+
+  @media (min-width: 1024px) {
+.bk.bk-popup {
+    margin: 20px;
+    width: 360px;
+    border-radius: 8px
+  }
+  }
+
+  @media (min-width: 1280px) {
+.bk.bk-popup {
+    width: 400px
+  }
+  }
+
+  .bk.bk-popup h2 {
+  font-weight: 700
+}
+
+  @media (min-width: 1024px) {
+
+  .bk.bk-popup h2 {
+    font-size: 20px;
+    line-height: 28px
+  }
+}
+
+  .bk.bk-popup .bk-button {
+  margin-top: 20px;
+  width: 100%
+}
+
+  .bk.bk-popup .bk-popup-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-bottom-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-border-opacity, 1));
+  padding-left: 20px
+}
+
+  .bk.bk-popup .bk-popup-content {
+  padding: 20px
+}
+</style>