@tak-ps/vue-tabler 4.29.2 → 5.0.0

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ## Version History
 
+### v5.0.0
+
+- :rocket: Remove `TablerList` as it used an outdated `window.std` requirement for fetching data
+
+### v4.29.3
+
+- :bug: Fix incorrect border when using pre or post icons in TablerInput
+
 ### v4.29.2
 
 - :bug: Upstream styling of label dropdowns

package/components/input/Input.vue

@@ -341,6 +341,32 @@ input:autofill {
     background-color: var(--tabler-input-bg, var(--tblr-bg-forms, var(--tblr-bg-surface, var(--tblr-body-bg))));
 }
 
+/*
+ * Tabler's input-group-flat strips the seam borders from the .form-control but
+ * not from the .input-group-text spans (icon, clear button, end adornment), so
+ * their inner borders survive as dividers - and get repainted blue by
+ * `.input-group-flat:focus-within .input-group-text` on focus. Drop every
+ * inner-facing span border, keeping only the group's outer outline.
+ */
+.input-group :deep(.input-group-text:not(:last-child)) {
+    border-right: 0;
+}
+
+.input-group :deep(.input-group-text:not(:first-child)) {
+    border-left: 0;
+}
+
+/*
+ * The .form-control also carries the standard 1px input drop shadow
+ * (--tblr-shadow-input) which the spans lack, leaving a faint horizontal line
+ * that starts only where the input does. A flat group should be flat - remove
+ * it inside the group entirely.
+ */
+.input-group :deep(.form-control),
+.input-group :deep(.input-group-text) {
+    box-shadow: none;
+}
+
 .tabler-input-with-end {
     padding-right: 3rem;
 }

package/lib.ts

@@ -20,7 +20,6 @@ export { default as TablerSlidedown } from './components/Slidedown.vue'
 export { default as TablerPager } from './components/Pager.vue'
 export { default as TablerNone } from './components/None.vue'
 export { default as TablerError } from './components/Err.vue'
-export { default as TablerList } from './components/List.vue'
 export { default as TablerHelp } from './components/Help.vue'
 export { default as TablerModal } from './components/Modal.vue'
 export { default as TablerProgress } from './components/Progress.vue'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "4.29.2",
+    "version": "5.0.0",
     "lib": "lib.ts",
     "main": "lib.ts",
     "module": "lib.ts",

package/components/List.vue

@@ -1,148 +0,0 @@
-<template>
-    <div class='dropdown'>
-        <label
-            v-if='label'
-            class='form-label'
-            :class='{
-                "required": required
-            }'
-            v-text='label'
-        />
-        <div
-            id='list-menu-button'
-            ref='button'
-            type='button'
-            data-bs-toggle='dropdown'
-            aria-expanded='false'
-            class='border rounded'
-            style='height: 36px;'
-        >
-            <div class='d-flex mx-2'>
-                <span
-                    v-if='ele && namekey'
-                    style='padding-top: 6px;'
-                    v-text='ele[namekey]'
-                />
-                <span
-                    v-else
-                    style='padding-top: 6px;'
-                >Select <span v-text='label' /></span>
-
-                <div class='ms-auto'>
-                    <IconSettings
-                        :size='32'
-                        stroke='1'
-                        style='margin-top: 4px;'
-                    />
-                </div>
-            </div>
-        </div>
-        <ul
-            class='dropdown-menu'
-            aria-labelledby='list-menu-button'
-            :style='{
-                "width": `${buttonHeight}px`
-            }'
-        >
-            <div class='m-1'>
-                <TablerInput
-                    v-model='filter'
-                    :disabled='disabled'
-                    placeholder='Name'
-                />
-                <div
-                    v-for='ele in (listkey ? list[listkey] : [])'
-                    :key='ele.id'
-                    @click='select(ele)'
-                >
-                    <div
-                        v-if='namekey'
-                        class='d-flex align-items-center my-1 cursor-pointer'
-                        v-text='ele[namekey]'
-                    />
-                </div>
-            </div>
-        </ul>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue'
-import TablerInput from './input/Input.vue';
-import {
-    IconSettings
-} from '@tabler/icons-vue';
-
-export interface ListProps {
-    url?: string;
-    listkey?: string;
-    namekey?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    initial?: Record<string, any>;
-    label?: string;
-    required?: boolean;
-    disabled?: boolean;
-    limit?: number;
-}
-
-const props = withDefaults(defineProps<ListProps>(), {
-    label: '',
-    required: false,
-    disabled: false,
-    limit: 10
-});
-
-const emit = defineEmits<{
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (e: 'selected', ele: any): void
-}>()
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ele = ref<any>(null)
-const isMounted = ref(false)
-const filter = ref('')
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const list = ref<any>({})
-const button = ref<HTMLElement | null>(null)
-
-const buttonHeight = computed(() => {
-    if(!isMounted.value) return 100;
-    const buttonDOM = button.value
-    return buttonDOM ? buttonDOM.offsetWidth : 100;
-})
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const select = (selectedEle: any) => {
-    ele.value = selectedEle;
-    if (props.namekey) {
-        filter.value = selectedEle[props.namekey];
-    }
-    emit("selected", selectedEle)
-}
-
-const fetchList = async () => {
-    if (!props.url) return;
-    // @ts-expect-error: Global window function
-    const url = window.stdurl(props.url);
-    url.searchParams.append('filter', filter.value);
-    url.searchParams.append('limit', String(props.limit));
-    // @ts-expect-error: Global window function
-    list.value = await window.std(url);
-}
-
-// Watchers
-watch(ele, () => {
-    filter.value = '';
-})
-
-watch(filter, async () => {
-    await fetchList();
-})
-
-// Mounted lifecycle
-onMounted(async () => {
-    if (props.initial && props.namekey && props.initial[props.namekey]) ele.value = props.initial;
-    await fetchList();
-    isMounted.value = true;
-})
-</script>