@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/features/preview-grant/QrCode/index.vue

@@ -1,21 +1,28 @@
 <template>
   <div>
-    <QrCodeVue
-      :value="fullUrl"
-      :size="430"
-      level="H"
-      class="_bk_!w-full _bk_!h-auto _bk_aspect-square"
-    />
-    <p class="_bk_my-20">
-      {{ $t("previewQrCodeText", "You can also copy the link and share it.") }}
-    </p>
-    <input :value="fullUrl" class="bk-form-input" readonly @focus="onFocus" />
+    <PanelSection :title="$t('qrCode', 'QR code')" padded>
+      <QrCodeVue
+        :value="fullUrl"
+        :size="430"
+        level="H"
+        class="_bk_!w-full _bk_!h-auto _bk_aspect-square"
+      />
+    </PanelSection>
+    <PanelSection :title="$t('link', 'Link')" padded>
+      <p class="_bk_mb-15">
+        {{
+          $t("previewQrCodeText", "You can also copy the link and share it.")
+        }}
+      </p>
+      <input :value="fullUrl" class="bk-form-input" readonly @focus="onFocus" />
+    </PanelSection>
   </div>
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
 import QrCodeVue from "qrcode.vue";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
 const { $t } = useBlokkli();
 const props = defineProps({
   url: { type: String, required: true }

package/dist/runtime/editor/features/preview-grant/index.vue

@@ -32,6 +32,7 @@
         is-danger
         hide-buttons
         :width="490"
+        mono
         @submit="qrCodeVisible = false"
         @cancel="qrCodeVisible = false"
       >

package/dist/runtime/editor/features/publish/Dialog/Item.vue

@@ -6,7 +6,14 @@
   'bk-is-warning': isScheduled && isSelected && !isSuccess
 }"
   >
-    <td>
+    <td
+      class="_bk_w-full _bk_pl-3"
+      :class="{
+  '_bk_bg-red-normal/10!': isError,
+  '_bk_bg-lime-light/40!': isSuccess,
+  '_bk_bg-mono-100': !isError && !isSuccess && isSelected
+}"
+    >
       <label class="bk-checkbox">
         <input
           v-if="isCurrent || isMutating || isSuccess"
@@ -25,21 +32,39 @@
             {{ bundleLabel }}
           </div>
         </div>
-        <div v-if="isCurrent" class="bk-pill">
-          {{ $t("publishCurrentPage", "Current page") }}
-        </div>
+        <Pill
+          v-if="isCurrent"
+          :text="$t('publishCurrentPage', 'Current page')"
+        />
       </label>
     </td>
-    <td>
+    <td
+      class="_bk_text-right _bk_whitespace-nowrap _bk_pl-18"
+      :class="{
+  '_bk_bg-red-normal/10!': isError,
+  '_bk_bg-lime-light/40!': isSuccess,
+  '_bk_bg-mono-100': !isError && !isSuccess && isSelected
+}"
+    >
       <span v-if="mutationStatusLabel">{{ mutationStatusLabel }}</span>
       <span v-else-if="isSelected">{{ newStatus.label }}</span>
     </td>
-    <td class="bk-is-status">
+    <td
+      class="_bk_text-right _bk_whitespace-nowrap _bk_pl-18 _bk_[&>div]:w-[60px] _bk_[&>div]:flex _bk_[&>div]:items-center _bk_[&>div]:justify-end _bk_[&>div]:gap-10"
+      :class="{
+  '_bk_bg-red-normal/10!': isError,
+  '_bk_bg-lime-light/40!': isSuccess,
+  '_bk_bg-mono-100': !isError && !isSuccess && isSelected
+}"
+    >
       <div v-if="isSuccess">
         <StatusIndicator :status="newStatusPropValue" class="_bk_mx-0" />
       </div>
       <div v-else-if="isSelected && isMutating">
-        <Icon name="loader" />
+        <Icon
+          name="loader"
+          class="_bk_[&_svg]:size-30 _bk_[&_svg]:fill-mono-500 _bk_mr-15"
+        />
       </div>
       <div v-else-if="isSelected">
         <StatusIndicator
@@ -47,7 +72,7 @@
           class="_bk_mx-0"
         />
         <template v-if="newStatus.status !== isCurrentlyPublished">
-          <Icon name="arrow-right-thin" />
+          <Icon name="arrow-right-thin" class="_bk_[&_svg]:size-15" />
           <StatusIndicator :status="newStatusPropValue" class="_bk_mx-0" />
         </template>
       </div>
@@ -57,7 +82,7 @@
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { Icon, StatusIndicator } from "#blokkli/editor/components";
+import { Icon, StatusIndicator, Pill } from "#blokkli/editor/components";
 const { $t } = useBlokkli();
 const props = defineProps({
   hostEntityType: { type: String, required: true },
@@ -141,3 +166,22 @@ const newStatusPropValue = computed(() => {
   return "error";
 });
 </script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk tr.bk-is-success input:checked + span:before {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1) !important;
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk tr.bk-is-success input:checked + span:before {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-lime-normal) / 1) 50%, transparent) !important;
+  }
+}
+.bk tr.bk-is-error input:checked + span:before {
+  background-color: rgb(var(--bk-theme-red-normal) / 1) !important;
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk tr.bk-is-error input:checked + span:before {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-red-normal) / 1) 90%, transparent) !important;
+  }
+}
+</style>

package/dist/runtime/editor/features/publish/Dialog/PublishOption.vue

@@ -1,12 +1,9 @@
 <template>
   <label
-    class="bk-publish-option"
-    :class="[
-  'bk-is-' + color,
-  {
-    'bk-is-disabled': disabled
-  }
-]"
+    class="_bk_group _bk_relative _bk_grid _bk_grid-cols-[auto_1fr] _bk_gap-15 _bk_items-center _bk_leading-none _bk_cursor-pointer _bk_hyphens-auto"
+    :data-test="'publish-mode-' + id"
+    :data-test-checked="isChecked"
+    :class="{ '_bk_pointer-events-none': disabled }"
   >
     <input
       v-model="value"
@@ -15,18 +12,43 @@
       required
       name="publish-mode"
       :disabled
+      class="_bk_appearance-none _bk_absolute _bk_top-0 _bk_left-0 _bk_opacity-0"
     />
-    <div class="bk-publish-option-icon">
+    <div
+      class="_bk_relative _bk_size-[60px] _bk_rounded-full _bk_border _bk_flex _bk_items-center _bk_justify-center _bk_[&_.bk-icon]:size-30 _bk_[&_.bk-icon_svg]:size-full _bk_[&_.bk-icon_svg]:fill-current"
+      :class="{
+  '_bk_border-mono-300! _bk_text-mono-300!': disabled,
+  '_bk_border-red-normal _bk_text-red-normal _bk_group-hover:bg-red-light': !disabled && !isChecked && color === 'red',
+  '_bk_border-yellow-normal _bk_text-yellow-normal _bk_group-hover:bg-yellow-light': !disabled && !isChecked && color === 'yellow',
+  '_bk_border-lime-normal _bk_text-lime-normal _bk_group-hover:bg-lime-light': !disabled && !isChecked && color === 'lime',
+  '_bk_bg-red-normal _bk_text-red-light _bk_border-red-dark _bk_ring-4 _bk_ring-red-normal/30 _bk_outline _bk_outline-1 _bk_outline-red-dark/60': !disabled && isChecked && color === 'red',
+  '_bk_bg-yellow-normal _bk_text-yellow-dark _bk_ring-4 _bk_ring-yellow-normal/30 _bk_outline _bk_outline-1 _bk_outline-yellow-dark/70': !disabled && isChecked && color === 'yellow',
+  '_bk_bg-lime-normal _bk_text-white _bk_ring-4 _bk_ring-lime-normal/30 _bk_outline _bk_outline-1 _bk_outline-lime-dark': !disabled && isChecked && color === 'lime'
+}"
+    >
       <Icon :name="icon" />
-      <div class="bk-publish-option-icon-check">
+      <div
+        class="_bk_absolute _bk_-top-[1px] _bk_-right-[9px] _bk_size-20 _bk_rounded-full _bk_bg-mono-950 _bk_flex _bk_items-center _bk_justify-center _bk_[&_.bk-icon_svg]:size-[13px] _bk_[&_.bk-icon_svg]:fill-white"
+        :class="isChecked ? '_bk_visible' : '_bk_invisible'"
+      >
         <Icon name="bk_mdi_check" />
       </div>
     </div>
     <div>
-      <div class="bk-publish-option-label">
+      <div
+        class="_bk_font-bold _bk_text-lg _bk_leading-none!"
+        :class="{
+  '_bk_text-mono-300': disabled,
+  '_bk_text-mono-950': !disabled && isChecked,
+  '_bk_text-mono-700': !disabled && !isChecked
+}"
+      >
         {{ label }}
       </div>
-      <div class="bk-publish-option-description">
+      <div
+        class="_bk_text-sm _bk_mt-3 _bk_leading-tight _bk_text-balance"
+        :class="disabled ? '_bk_text-mono-300' : '_bk_text-mono-600'"
+      >
         {{ description }}
       </div>
     </div>
@@ -34,8 +56,9 @@
 </template>
 
 <script setup>
+import { computed } from "#imports";
 import { Icon } from "#blokkli/editor/components";
-defineProps({
+const props = defineProps({
   id: { type: String, required: true },
   label: { type: String, required: true },
   description: { type: String, required: true },
@@ -44,4 +67,5 @@ defineProps({
   disabled: { type: Boolean, required: false }
 });
 const value = defineModel({ type: String });
+const isChecked = computed(() => value.value === props.id);
 </script>

package/dist/runtime/editor/features/publish/Dialog/Summary.vue

@@ -1,41 +1,68 @@
 <template>
-  <div class="bk-publish-summary">
+  <div class="_bk_flex _bk_items-center _bk_justify-between">
     <!-- Current State -->
-    <div class="bk-publish-summary-state">
-      <div class="bk-publish-summary-state-icon" :class="currentStateClass">
+    <div
+      class="_bk_flex _bk_items-center _bk_gap-5 _bk_relative _bk_justify-center _bk_[&_.bk-icon]:size-15 _bk_[&_.bk-icon_svg]:size-full _bk_[&_.bk-icon_svg]:fill-current"
+    >
+      <div
+        class="_bk_size-25 _bk_rounded-full _bk_flex _bk_items-center _bk_justify-center _bk_border"
+        :class="{
+  '_bk_border-lime-normal _bk_text-lime-normal': isPublished,
+  '_bk_border-red-normal _bk_text-red-normal': !isPublished
+}"
+      >
         <Icon :name="currentStateIcon" />
       </div>
-      <div class="bk-publish-summary-state-label">
+      <div class="_bk_text-sm _bk_font-medium _bk_text-mono-700 _bk_text-center">
         {{ currentStateLabel }}
       </div>
     </div>
 
     <!-- Arrow -->
-    <div class="bk-publish-summary-arrow">
+    <div
+      class="_bk_flex _bk_items-center _bk_[&_.bk-icon]:size-20 _bk_[&_.bk-icon_svg]:size-full _bk_[&_.bk-icon_svg]:fill-mono-700"
+    >
       <Icon name="bk_mdi_arrow_right" />
     </div>
 
     <!-- Action -->
-    <div class="bk-publish-summary-action">
-      <div class="bk-publish-summary-action-icon" :class="actionClass">
+    <div
+      class="_bk_flex _bk_items-center _bk_gap-5 _bk_relative _bk_justify-center _bk_[&_.bk-icon]:size-15 _bk_[&_.bk-icon_svg]:size-full _bk_[&_.bk-icon_svg]:fill-current"
+    >
+      <div
+        class="_bk_size-25 _bk_rounded-full _bk_flex _bk_items-center _bk_justify-center _bk_border"
+        :class="{
+  '_bk_bg-red-normal _bk_border-red-dark _bk_text-white': mode === 'save',
+  '_bk_bg-yellow-normal _bk_border-yellow-dark _bk_text-yellow-dark': mode === 'scheduled',
+  '_bk_bg-lime-normal _bk_border-lime-dark _bk_text-white': mode === 'immediate'
+}"
+      >
         <Icon :name="actionIcon" />
       </div>
-      <div class="bk-publish-summary-action-label">
+      <div class="_bk_text-sm _bk_font-medium _bk_text-mono-700 _bk_text-center">
         {{ actionLabel }}
       </div>
     </div>
 
     <!-- Arrow -->
-    <div class="bk-publish-summary-arrow">
+    <div
+      class="_bk_flex _bk_items-center _bk_[&_.bk-icon]:size-20 _bk_[&_.bk-icon_svg]:size-full _bk_[&_.bk-icon_svg]:fill-mono-700"
+    >
       <Icon name="bk_mdi_arrow_left" />
     </div>
 
     <!-- Result State -->
-    <div class="bk-publish-summary-state" :class="resultStateClass">
+    <div
+      class="_bk_flex _bk_items-center _bk_gap-5 _bk_relative _bk_justify-center _bk_border _bk_rounded-full _bk_pr-10 _bk_[&_.bk-icon]:size-25 _bk_[&_.bk-icon]:rounded-full _bk_[&_.bk-icon]:flex _bk_[&_.bk-icon]:items-center _bk_[&_.bk-icon]:justify-center _bk_[&_.bk-icon]:bg-white _bk_[&_.bk-icon_svg]:size-15"
+      :class="{
+  '_bk_bg-lime-normal _bk_border-lime-normal _bk_[&_.bk-icon_svg]:fill-lime-normal': isResultPublished,
+  '_bk_bg-red-normal _bk_border-red-normal _bk_[&_.bk-icon_svg]:fill-red-normal': !isResultPublished
+}"
+    >
       <div>
         <Icon :name="resultStateIcon" />
       </div>
-      <div class="bk-publish-summary-state-label">
+      <div class="_bk_pr-5 _bk_font-semibold _bk_leading-none _bk_text-sm _bk_text-white">
         {{ resultStateLabel }}
       </div>
     </div>
@@ -55,29 +82,13 @@ const props = defineProps({
 const currentStateIcon = computed(
   () => props.isPublished ? "bk_mdi_visibility" : "bk_mdi_visibility_off"
 );
-const currentStateClass = computed(
-  () => props.isPublished ? "bk-is-published" : "bk-is-unpublished"
+const isResultPublished = computed(() => props.mode !== "save");
+const resultStateIcon = computed(
+  () => props.mode === "save" ? "bk_mdi_visibility_off" : "bk_mdi_visibility"
 );
-const resultStateIcon = computed(() => {
-  if (props.mode === "save") {
-    return "bk_mdi_visibility_off";
-  }
-  return "bk_mdi_visibility";
-});
-const resultStateClass = computed(() => {
-  if (props.mode === "save") {
-    return "bk-is-unpublished";
-  }
-  return "bk-is-published";
-});
 const actionIcon = computed(() => {
   if (props.mode === "save") return "bk_mdi_save";
   if (props.mode === "scheduled") return "bk_mdi_calendar_clock";
   return "bk_mdi_publish";
 });
-const actionClass = computed(() => {
-  if (props.mode === "save") return "bk-is-save";
-  if (props.mode === "scheduled") return "bk-is-scheduled";
-  return "bk-is-publish";
-});
 </script>