@tak-ps/vue-tabler 4.18.0 → 4.21.0

package/CHANGELOG.md

@@ -10,6 +10,21 @@
 
 ## Version History
 
+### v4.21.0
+
+- :rocket: Migrate to more modern `marked` instead of `showdown`
+
+### v4.20.0
+
+- :bug: Fix hover state
+
+### v4.19.1
+
+- :bug: Fix `TablerBorder` `tools` slot not appearing on hover when scoped CSS selector matched the wrong element
+
+### v4.19.0
+
+- :rocket: Simplify `TablerBorder` to expose a generic `tools` slot for hover-revealed actions; remove edit-specific props and slots
 ### v4.17.0
 
 - :rocket: `TablerBorder` now supports `background`, `editable`, `editing`, `editAriaLabel` props plus `actions` and `editor` slots and an `edit` event for inline edit container patterns

package/README.md

@@ -96,7 +96,7 @@ import { TablerButton, TablerAlert } from '@tak-ps/vue-tabler';
 This library relies on the following core dependencies:
 - [Vue 3](https://vuejs.org/)
 - [@tabler/icons-vue](https://www.npmjs.com/package/@tabler/icons-vue)
-- [showdown](https://www.npmjs.com/package/showdown) (for Markdown rendering)
+- [marked](https://www.npmjs.com/package/marked) (for Markdown rendering)
 
 ## 📄 License
 

package/components/Border.vue

@@ -1,17 +1,11 @@
 <template>
     <div
-        class='card border border-light-subtle'
+        class='card tabler-border border border-light-subtle'
         :class='{
             "h-100": fillHeight,
             "shadow-sm": shadow,
-            "tabler-border--clickable": clickable,
         }'
         :style='backgroundStyle'
-        :role='clickable ? "button" : undefined'
-        :tabindex='clickable ? 0 : undefined'
-        @click='handleClick'
-        @keyup.enter='handleClick'
-        @keyup.space.prevent='handleClick'
     >
         <div
             class='card-body d-flex flex-column position-relative'
@@ -36,36 +30,19 @@
             </div>
 
             <div
-                v-if='showActions'
-                class='tabler-border__actions position-absolute'
+                v-if='$slots.tools'
+                class='tabler-border__tools position-absolute'
             >
-                <slot name='actions'>
-                    <TablerIconButton
-                        v-if='editable && !editing'
-                        :title='resolvedEditAriaLabel'
-                        @click.stop.prevent='emit("edit")'
-                    >
-                        <IconPencil
-                            :size='24'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </slot>
+                <slot name='tools' />
             </div>
 
-            <slot
-                v-if='editing'
-                name='editor'
-            />
-            <slot v-else />
+            <slot />
         </div>
     </div>
 </template>
 
 <script setup lang='ts'>
-import { computed, useSlots } from 'vue';
-import TablerIconButton from './IconButton.vue';
-import { IconPencil } from '@tabler/icons-vue';
+import { computed } from 'vue';
 
 export interface BorderProps {
     label?: string;
@@ -73,9 +50,6 @@ export interface BorderProps {
     background?: string;
     shadow?: boolean;
     fillHeight?: boolean;
-    editable?: boolean;
-    editing?: boolean;
-    editAriaLabel?: string;
 }
 
 const props = withDefaults(defineProps<BorderProps>(), {
@@ -84,65 +58,25 @@ const props = withDefaults(defineProps<BorderProps>(), {
     background: '',
     shadow: true,
     fillHeight: true,
-    editable: false,
-    editing: false,
-    editAriaLabel: '',
 });
 
-const emit = defineEmits<{
-    edit: [];
-}>();
-
-const slots = useSlots();
-
 const backgroundStyle = computed(() => {
     if (!props.background) return undefined;
     return { backgroundColor: props.background };
 });
-
-const clickable = computed(() => props.editable && !props.editing);
-
-const showActions = computed(() => {
-    if (slots.actions) return true;
-    return props.editable && !props.editing;
-});
-
-const resolvedEditAriaLabel = computed(() => {
-    if (props.editAriaLabel) return props.editAriaLabel;
-    if (props.label) return `Edit ${props.label.toLowerCase()}`;
-    return 'Edit';
-});
-
-function handleClick(): void {
-    if (!clickable.value) return;
-    emit('edit');
-}
 </script>
 
 <style scoped>
-.tabler-border--clickable {
-    cursor: pointer;
-}
-
-.tabler-border--clickable:focus-visible {
-    outline: 2px solid rgba(var(--tblr-primary-rgb, 32, 107, 196), 0.7);
-    outline-offset: 2px;
-}
-
-.tabler-border__actions {
+.tabler-border__tools {
     top: 8px;
     right: 8px;
-    opacity: 1;
-    transition: opacity 0.15s ease-in-out;
-}
-
-.tabler-border--clickable .tabler-border__actions {
+    z-index: 2;
     opacity: 0;
+    transition: opacity 0.15s ease-in-out;
 }
 
-.tabler-border--clickable:hover .tabler-border__actions,
-.tabler-border--clickable:focus-visible .tabler-border__actions,
-.tabler-border__actions:focus-within {
+.tabler-border:hover > .card-body > .tabler-border__tools,
+.tabler-border:focus-within > .card-body > .tabler-border__tools {
     opacity: 1;
 }
 </style>

package/components/Markdown.vue

@@ -7,8 +7,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-// @ts-expect-error: showdown types not available
-import showdown from 'showdown'
+import { marked } from 'marked'
 
 export interface MarkdownProps {
     markdown: string;
@@ -20,11 +19,9 @@ const props = withDefaults(defineProps<MarkdownProps>(), {
 });
 
 const html = computed(() => {
-    const converter = new showdown.Converter({
-        tables: true,
-        tasklists: true,
-        emoji: true
+    return marked.parse(props.markdown, {
+        async: false,
+        gfm: true
     })
-    return converter.makeHtml(props.markdown)
 })
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "4.18.0",
+    "version": "4.21.0",
     "lib": "lib.ts",
     "main": "lib.ts",
     "module": "lib.ts",
@@ -27,7 +27,7 @@
     "homepage": "https://github.com/tak-ps/vue-tabler#readme",
     "dependencies": {
         "@tabler/icons-vue": "^3.0.0",
-        "showdown": "^2.1.0"
+        "marked": "^18.0.2"
     },
     "peerDependencies": {
         "vue": "^3.5.12",