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

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

@@ -63,25 +63,24 @@ defineExpose({
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk .bk-plugin-config-form {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-end;
-      gap: 10px
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 10px;
 }
-  .bk .bk-plugin-config-form > li {
-      flex: 1 1 0%;
-      flex-shrink: 1
+:is(.bk .bk-plugin-config-form)  > li {
+  flex: 1;
+  flex-shrink: 1;
 }
-  .bk .bk-plugin-config-form > li.bk-is-type-options,
-    .bk .bk-plugin-config-form > li.bk-is-type-text {
-      min-width: 200px
+.bk-is-type-options:is(:is(.bk .bk-plugin-config-form) > li),.bk-is-type-text:is(:is(.bk .bk-plugin-config-form) > li) {
+  min-width: 200px;
 }
-  .bk .bk-plugin-config-form > li.bk-is-type-checkbox {
-      flex: none;
-      min-height: 46px;
-      display: flex;
-      align-items: center
+.bk-is-type-checkbox:is(:is(.bk .bk-plugin-config-form) > li) {
+  flex: none;
+  min-height: 46px;
+  display: flex;
+  align-items: center;
 }
 </style>

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

@@ -24,7 +24,7 @@
           v-model="search"
           class="bk-form-input bk-is-small"
           type="text"
-          :placeholder="$t('filterSelectSearch', 'Search...')"
+          :placeholder="$t('search', 'Search', { more: true })"
         />
       </div>
       <ul ref="listEl">
@@ -162,268 +162,136 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk .bk-config-filter-select {
-
-    position: relative;
-
-    height: 100%
+  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
+:is(.bk .bk-config-filter-select)  > button {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: 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
+:is(:is(.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
+:is(:is(.bk .bk-config-filter-select) > button)  > .bk-icon {
+  height: 25px;
+  width: 25px;
+  flex-shrink: 0;
+  color: rgb(var(--bk-theme-mono-500) / 1);
+  transition-property: transform, translate, scale, rotate;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
 }
-
-    .bk .bk-config-filter-select > button > .bk-icon svg {
-
-    fill: currentColor
+:is(:is(:is(.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))
+:is(:is(.bk .bk-config-filter-select) > button) .bk-config-filter-select-label {
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-leading: 1;
+  line-height: 1;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  --bk-tw-tracking: var(--tracking-wide, 0.025em);
+  letter-spacing: var(--tracking-wide, 0.025em);
+  color: rgb(var(--bk-theme-mono-500) / 1);
+  text-transform: uppercase;
 }
-
-    .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))
+:is(:is(.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: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-leading: 1 !important;
+  line-height: 1 !important;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-mono-900) / 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-is-open:is(.bk .bk-config-filter-select) > button > .bk-icon {
+  rotate: 180deg;
 }
-
-    .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)
+:is(.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-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  background-color: white;
+  --bk-tw-shadow: 0 10px 15px -3px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), 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
+:is(:is(.bk .bk-config-filter-select) .bk-config-filter-select-dropdown) .bk-config-filter-select-search {
+  position: sticky;
+  top: 0px;
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  background-color: white;
+  padding: 15px;
 }
-
-    .bk .bk-config-filter-select .bk-config-filter-select-dropdown ul {
-
-    padding-top: 3px;
-
-    padding-bottom: 3px
+:is(:is(.bk .bk-config-filter-select) .bk-config-filter-select-dropdown) ul {
+  padding-block: 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))
+:is(:is(.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-inline: 20px;
+  padding-block: 8px;
+  text-align: left;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: rgb(var(--bk-theme-mono-900) / 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))
+@media (hover: hover) {
+  :is(:is(:is(.bk .bk-config-filter-select) .bk-config-filter-select-dropdown) li button):hover {
+    background-color: rgb(var(--bk-theme-accent-50) / 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))
+@media (hover: hover) {
+  :is(:is(:is(.bk .bk-config-filter-select) .bk-config-filter-select-dropdown) li button):hover {
+    color: rgb(var(--bk-theme-accent-900) / 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-is-highlighted:is(:is(:is(.bk .bk-config-filter-select) .bk-config-filter-select-dropdown) li button) {
+  background-color: rgb(var(--bk-theme-accent-50) / 1);
+  color: rgb(var(--bk-theme-accent-900) / 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))
+.bk-is-active:is(:is(:is(.bk .bk-config-filter-select) .bk-config-filter-select-dropdown) li button) {
+  background-color: rgb(var(--bk-theme-accent-100) / 1);
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-accent-900) / 1);
+}
+:is(:is(.bk .bk-config-filter-select) .bk-config-filter-select-dropdown) .bk-config-filter-select-empty {
+  padding-inline: 20px;
+  padding-block: 10px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: rgb(var(--bk-theme-mono-400) / 1);
+  font-style: italic;
 }
 </style>

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

@@ -53,98 +53,83 @@ defineProps({
 const emit = defineEmits(["update:modelValue"]);
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk .bk-plugin-config-form-inline {
   position: relative;
   z-index: 5000;
   display: flex;
   flex-wrap: wrap;
   column-gap: 1px;
+  background-color: rgb(var(--bk-theme-mono-300) / 1);
   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
+  flex: 0 0 auto;
 }
-
-  .bk .bk-plugin-config-form-inline > div {
+:is(.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))
+  flex: 1;
+  background-color: white;
 }
-
-  .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))
+@media (hover: hover) {
+  :is(:is(.bk .bk-plugin-config-form-inline) > div):hover {
+    background-color: rgb(var(--bk-theme-mono-100) / 1);
+  }
 }
-
-  .bk .bk-plugin-config-form-inline > div {
+:is(.bk .bk-plugin-config-form-inline)  > div {
+  border-bottom-style: var(--bk-tw-border-style);
   border-bottom-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
 }
-
-  .bk .bk-plugin-config-form-inline > div .bk-checkbox-toggle {
+:is(:is(.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
+  padding-inline: 10px;
+  padding-block: 15px;
 }
-
-  .bk .bk-plugin-config-form-inline > div .bk-checkbox-toggle .bk-checkbox-toggle-label-label {
-  font-size: 14px;
-  line-height: 20px
+:is(:is(:is(.bk .bk-plugin-config-form-inline) > div) .bk-checkbox-toggle) .bk-checkbox-toggle-label-label {
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
 }
-
-  .bk .bk-plugin-config-form-inline > div .bk-form-text {
-  position: relative
+:is(:is(.bk .bk-plugin-config-form-inline) > div) .bk-form-text {
+  position: relative;
 }
-
-  .bk .bk-plugin-config-form-inline > div .bk-form-text .bk-icon {
+:is(:is(:is(.bk .bk-plugin-config-form-inline) > div) .bk-form-text) .bk-icon {
   position: absolute;
-  top: 50%;
+  top: calc(1 / 2 * 100%);
   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-tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  color: rgb(var(--bk-theme-mono-500) / 1);
 }
-
-  .bk .bk-plugin-config-form-inline > div .bk-form-text .bk-icon svg {
-  fill: currentColor
+:is(:is(:is(:is(.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 {
+:is(:is(:is(.bk .bk-plugin-config-form-inline) > div) .bk-form-text) input {
+  border-style: var(--bk-tw-border-style) !important;
   border-width: 0 !important;
   background-color: transparent;
-  font-size: 14px;
-  line-height: 20px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   --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
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow) !important;
+  outline-style: var(--bk-tw-outline-style) !important;
+  outline-width: 0px !important;
 }
-
-  .bk .bk-plugin-config-form-inline > div .bk-form-text input:focus {
-  outline-width: 0px !important
+:is(:is(:is(:is(.bk .bk-plugin-config-form-inline) > div) .bk-form-text) input):focus {
+  outline-style: var(--bk-tw-outline-style) !important;
+  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))
+:is(:is(:is(.bk .bk-plugin-config-form-inline) > div) .bk-form-text):focus-within .bk-icon {
+  color: rgb(var(--bk-theme-accent-700) / 1);
 }
-
-  .bk .bk-plugin-config-form-inline > div .bk-form-text > input {
+:is(:is(:is(.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
+  padding-left: 30px;
+  min-width: 200px;
 }
 </style>